uni-app开发微信小程序使用zb-table组件,进行表格自定义开发(支持固定表头和首列、上拉加载更多、及固定多列,表格自适应内容,排序,多选checkbox、可点击删除,编辑、合计功能,兼容多)

文档地址

zb-table文档
该文档支持固定表头和首列、上拉加载更多、及固定多列,表格自适应内容,排序,多选checkbox、可点击删除,编辑、合计功能,兼容多端

简单的功能直接文档有解析。
这里只解析运用到的两个格式化
数据内容格式化以及数据样式格式化。

cell-style和formatter方法:

cell-style:
可以对每个数据进行样式的格式化处理
当然你也可以通过判断行列的数据特点,对指定的行,列或者某个关键数据进行特定的样式编写。

<zb-table :cell-style="handleStyle"></zb-table>
  const handleStyle = (val) => {
  	console.log(val);
  	// 输入为一个对象
  	// column columnIndex row rowIndex
  	//纵数据 纵索引
  	//横数据 横索引
	//在该函数内可以把个数据进行样式的格式化
	//
	retunrn {
		'color':'red',
		'background':'black'
		//可以使每一行字体颜色为红背景颜色为黑
	}
  }

formatter:
可以对行或列的数据显示进行格式化操作,

     <zb-table :formatter="handleTableCol" ></zb-table>
  const handleTableCol = (a, b, c, d) => {
	console.log(a,b,c,d)
	//a row数据
	//b column数据
	//c rowindex
	//d columnindex
	return '测试数据'
	//会让每一行都变成测试数据
	//return的内容就是表格显示的内容
  }
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值