更新记录

1.2.1（2026-08-25）

修复vue2/vue3兼容问题

1.1.0（2026-08-21）

支持安卓、IOS、小程序、鸿蒙端

1.0.0（2024-08-31）

• 发布1.0.0版本

平台兼容性

uni-app(4.62)

uni-app x(5.24)

wfw-table 列表选择表格

基于 uni-app 的多行分组选择表格组件：按「项目 → 强度」两级结构展示数据，支持查看/编辑两种模式，勾选高亮并回报选中项 id。适用于运动强度选择、体检项目勾选等场景。

特性

• 顶部 tabbar 可选切换（传空数组可隐藏）
• look 查看 / edit 编辑两种模式，编辑态可勾选、查看态纯展示
• 单项勾选后自动联动所在行的选中态（行标题高亮）
• change 事件返回当前操作项 id，累计逻辑由业务方自行控制
• 查看模式可配置只显示已勾选的行
• 纯 view + flex 实现，无第三方依赖

快速上手

组件位于 uni_modules/wfw-table/，符合 easycom 规范，项目开启 autoscan 后直接使用，无需 import：

<wfw-table type="edit" :table="table" @change="change"></wfw-table>

如需手动引入（Vue 3 必须使用默认导入）：

import wfwTable from '@/uni_modules/wfw-table/components/wfw-table/wfw-table.vue'

export default {
    components: {
        wfwTable
    },
    // ...
}

完整示例

<template>
    <wfw-table type="edit" :selectList="selectList" :selectIndex="selectIndex" @clickSelect="clickSelect"
        @change="change" :table="table"></wfw-table>
</template>

<script>
    export default {
        data() {
            return {
                // 顶部tabbar文案（不必填，传 [] 可隐藏tabbar）
                selectList: [
                    '男生',
                    '女生'
                ],
                // 默认选中下标（不必填）
                selectIndex: 0,
                // 已选项id集合（业务方自行维护）
                intensityIds: '',
                // 表格数据
                table: {
                    title: '30分钟各项运动消耗热量表',
                    header: [
                        '运动项目',
                        '运动强度',
                        '66公斤男性消耗热量(千卡)',
                        '标记'
                    ],
                    list: [{
                            title: '步行', // 行标题（项目名）
                            isCheck: true, // 行选中态（子项有勾选时自动置true）
                            list: [{
                                    name: '慢速', // 强度名称
                                    number: '82.5', // 消耗热量
                                    id: 1, // 强度id（change事件返回，必填）
                                    isCheck: false, // 勾选状态
                                },
                                {
                                    name: '中速',
                                    number: '115.5',
                                    id: 2,
                                    isCheck: true,
                                }
                            ]
                        },
                        {
                            title: '跑步',
                            isCheck: false,
                            list: [{
                                    name: '慢跑',
                                    number: '231',
                                    id: 3,
                                    isCheck: false,
                                },
                                {
                                    name: '快跑',
                                    number: '264',
                                    id: 4,
                                    isCheck: false,
                                }
                            ]
                        }
                    ]
                }
            }
        },
        methods: {
            /* 切换tabbar */
            clickSelect(e) {
                // e: { index: 切换后的下标, table: 表格数据 }
                console.log('切换tabbar', e.index);
            },
            /* 勾选/取消勾选 */
            change(e) {
                // e: { table: 表格数据, intensityIds: 当前操作项的id }
                // 注意：组件只返回当前操作项id，累计/移除由业务方维护
                const id = '' + e.intensityIds;
                let ids = this.intensityIds ? this.intensityIds.split(',') : [];
                const i = ids.indexOf(id);
                if (i > -1) {
                    ids.splice(i, 1); // 取消勾选，移除
                } else {
                    ids.push(id); // 勾选，追加
                }
                this.intensityIds = ids.join(',');
                console.log('已选id集合', this.intensityIds);
            }
        }
    }
</script>

Props

table 数据结构

Events

使用技巧

• 隐藏顶部 tabbar：切换逻辑放在页面中时，传 :selectList="[]" 只渲染表格部分
• 查看推荐结果：type="look" + :isNotShowNotCheck="true"，只显示已勾选行，配合数据回显推荐内容
• 样式约定：表格总宽 670rpx，四列固定宽度 182 / 182 / 241 / 61rpx，主题色 #37C8D7（如需换肤可直接修改组件内 scss）

隐私、权限声明

1. 本插件需要申请的系统权限列表： 无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明： 无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率： 无