zb table

介绍

基于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:\'custom\', // type 为custom的时候自定义按钮 其他类型取决于uniapp buttom组件按钮
                class:\"custom\",
                func:\'custom\'
              },
              {
                name:\'删除\',
                type:\'warn\',
                func:\"dele\"
              },
            ]},
        ],
 data:[
          {
            date: \'2016-05-02\',
            name: \'王小虎1\',
            province: \'上海\',
            sex:\'男\',
            age:\'18\',
			img:\"https://img1.ba**i*du.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
          }
        ]