更新记录

1.0.1（2021-08-11）

1.H5平台表格头部样式空行修复

1.0.0（2021-07-12）

超级表格table，动态配置展示参数, 条件筛选

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue × √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

# ws-table

本表格支持动态设置展示字段，配置字典tag，联动滚动

使用方式

// 在js中引用
import WsTable from "@/components/ws-table/index.vue"
components:{ WsTable },
// 在界面中引用
<view class="container">
    <ws-table :config="config" :table-data="tableData" @getQuery="getQuery"></ws-table>
</view>

OBJECT参数说明

参数 说明
config 表格展示字段配置，见下表详细说明
tableData 表格数据
showSummary 是否展示合计项

config参数说明

参数 类型 说明
label string 表格头部列名
key string 表格字段
width number 列宽度
isSum boolean 是否是合计项
isTag boolean 是否是标签
filter object 搜索配置，见下表详细说明

filter参数说明

参数 类型 说明
label string 搜索名，缺失默认使用config配置的label
key string 搜索字段
component input、select 搜索组件名，暂只支持‘input’，‘select’， 默认‘input’
options array component为 'select' 必须配置，格式必须为[{label: '通过',value: 'Y'},{label: '未通过',value: 'N'}]

示例配置

// 在js中引用
 const config = [
      {
        label: '姓名',
        key: 'name',
        width: 150,
        isFixed: true,
        filter: {
          label: '姓名',
          key: 'name'
        }
      },
      {
        label: '是否通过',
        key: 'isPass',
        width: 150,
        isTag: true,
        filter: {
          label: '是否通过',
          key: 'isPass',
          component: 'select',
          options: [
            {
              label: '通过',
              value: 'Y'
            },
            {
              label: '未通过',
              value: 'N'
            }
          ]
        }
      },
      {
        label: '语文',
        key: 'yuwen',
        width: 120
      },
      {
        label: '数学',
        key: 'math',
        width: 100,
        isSum: true,
        bgColor: '#fffbe5',
        filter: {
          label: '数学',
          key: 'math'
        }
      },
      {
        label: '英语',
        key: 'english',
        isSum: true,
        width: 80
      },
      {
        label: '物理',
        key: 'wuli',
        isSum: true,
        width: 80
      },
      {
        label: '化学',
        key: 'huaxue',
        isSum: true,
        width: 80
      },
      {
        label: '生物',
        key: 'shengwu',
        isSum: true,
        width: 80
      },
      {
        label: '地理',
        key: 'dili',
        isSum: true,
        width: 80
      },
      {
        label: '政治',
        key: 'zhengzhi',
        isSum: true,
        width: 80
      },
      {
        label: '历史',
        key: 'lishi',
        isSum: true,
        width: 80
      },
      {
        label: '体育',
        key: 'tiyu',
        isSum: true,
        width: 80
      }
    ]

数据配置

// 在js中引用
const tableData = [
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '李四',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'N'
      },
      {
        name: '二蛋',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '瓜瓜',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'N'
      },
      {
        name: '李强',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '小红',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '小芳',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '小明',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '盼盼',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '楞楞',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '哈哈',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '李静',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '李一一',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张小小',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '赵山山',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      },
      {
        name: '张三',
        yuwen: '99',
        math: '100',
        english: '96',
        wuli: '88',
        huaxue: '66',
        shengwu: '89',
        dili: '59',
        zhengzhi: '46',
        lishi: '44',
        tiyu: '30',
        isPass: 'Y'
      }
    ]

隐私、权限声明

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

无

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

插件不采集任何数据

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

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...