文档地址
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的内容就是表格显示的内容
}