更新记录

1.2.18（2023-06-01）

更新

1.2.17（2023-06-01）

感谢群里大佬给的示例，修复多选按钮问题，增加清除方法 this.$refs.table.clearSelection()

1.2.16（2023-05-10）

增加单元格点击事件 完善文档 增加示例

平台兼容性

介绍

基于uni-app开发的一个普通的表格组件，功能有固定首列和表头、排序、操作按钮、 table 表格 固定表头、固定首列、多列 上拉加载更多、 排序、自适应列宽、多选checkbox、编辑、删除、按钮、合计 已用于生产环境

微信=》 19550102670 拉进群

-- github 第一时间会更新到github，永远保持最新，有啥想法的可以提PR,共同开发 地址

友情链接

在线预览点击 —— 企业级、通用型中后台前端解决方案

vue-admin-perfect —— 企业级、通用型中后台前端解决方案（基于vue3.0+TS+Element-Plus 最新版，同时支持电脑，手机，平板)

table 属性

关闭上拉加载的方式1：pullUpLoading((done)=>{
    done(type)
})
done 接收参数为 type ，type为空代表还有数据，可以继续加载，无数据的时候传入 'ok'代表结束

table 事件

关闭上拉加载的方式2：this.$refs.zbTable.pullUpCompleteLoading('ok')
接收参数为 type ，type为空代表还有数据，可以继续加载，无数据的时候传入 'ok'代表结束

data 属性

column 属性

type 为 operation 的时候代表为操作按钮
renders 代表传入的按钮  Array  =>[
    {
        name:'编辑',
        class:"", // 添加class
        type:'primary',代表按钮的类型  type 为custom的时候自定义按钮 其他类型取决于uniapp buttom组件按钮
        size:'mini',代表按钮的大小
        func:'edit' // func 代表操作按钮点击的事件名字 父元素接收的事件 父元素 @edit
        例如：// <zb-table @edit=""/> 

    }
]

示例

<zb-table
            :show-header="true"
            :columns="column"
            :stripe="true"
            :fit="false"
            show-summary
            sum-text="合计"
            @rowClick="rowClick"
            :summary-method="getSummaries"
            @toggleRowSelection="toggleRowSelection"
            @toggleAllSelection="toggleAllSelection"
            :border="true"
            @edit="buttonEdit"
            @dele="dele"
            :data="data"></zb-table>

数据格式

column:[
          { type:'selection', fixed:true,width:50 },
          { name: 'name', label: '姓名',fixed:false,width:80,emptyString:'--' },
          { name: 'age', label: '年纪',sorter:false,align:'right', },
          { name: 'sex', label: '性别',filters:{0:'男',1:'女'}},
          { name: 'img', label: '图片',type:"img" },
          { name: 'address', label: '地址' },
          { name: 'date', label: '日期',sorter:true },
          { name: 'province', label: '省份' },
          { name: 'city', label: '城市' },
          { name: 'zip', label: '邮编' },
          { name: 'operation', type:'operation',label: '操作',renders:[
              {
                name:'编辑',
                func:'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
              },
              {
                name:'删除',
                type:'warn',
                func:"dele"
              },
            ]},
        ],
 data:[
          {
            date: '2016-05-02',
            name: '王小虎1',
            province: '上海',
            sex:'男',
            age:'18',
            img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
            city: '普陀区',
            address: '上海市普',
            zip: 200333
          },
          {
            date: '2016-05-02',
            name: '王小虎2',
            province: '上海',
            sex:'男',
            age:'18',
            city: '普陀区',
            address: '上海市普',
            zip: 200333
          },
          {
            date: '2016-05-02',
            name: '王小虎3',
            province: '上海',
            sex:'男',
            age:'18',
            city: '普陀区',
            address: '上海市普',
            zip: 200333
          },
          {
            date: '2016-05-02',
            name: '王小虎4',
            province: '上海',
            sex:'男',
            age:'18',
            city: '普陀区',
            address: '上海市普',
            zip: 200333
          },
          {
            date: '2016-05-02',
            name: '王小虎5',
            province: '上海',
            sex:'男',
            age:'18',
            city: '普陀区',
            address: '上海市普',
            zip: 200333
          }
        ]