Ant-Design-Vue table中使用customCell自定义单元格样式
记录一下表格。customCell的使用方式
在ant-design-vue中的table中有个根据某种规则把那个单个数据标红的业务需求
官方文档中：
customRow 用法 #
//customCell 设置单元格属性 Function(record, rowIndex, column)
适用于 customRow customHeaderRow customCell customHeaderCell。遵循Vue jsx语法。
使用
首先在html中引入，把customCell绑定自己自定义的一个方法renderTdBackground()
<a-tablebordered:columns="columns":dataSource="dataSource":pagination="false":customCell="renderTdBackground":scroll="{ x : 'max-contennt' }"></a-table>
表格中只有单列需要自定义单元格
在columns中需要的那一列定义customCell
const columns = [...{title: '名称',dataIndex: 'name', key:'name',align: "center", width: 100, customCell:this.renderTimeBackground},{title: '指标',dataIndex: 'zhibiao', key:'zhibaio',align: "center", width: 100, },...
在methods中定义renderTdBackground()和renderTimeBackground()方法
rendersjbBackground(record){return this.renderTdBackground(record)},
处理自定义单元格
renderTdBackground(record){if(record.name == 1 ){return {style: {//可以设置任何你想要的样式 'background-color': 'rgb(255,150,150)',},}}},
表格中有多列需要自定义单元格样式
在columns中需要的那一列定义customCell
const columns = [...{title: '名称',dataIndex: 'name', key:'name',align: "center", width: 100, customCell:this.renderTimeBackground},{title: '指标',dataIndex: 'zhibiao', key:'zhibaio',align: "center", width: 100, customCell:this.renderTimeBackground},...
在methods中定义renderTdBackground()和renderTimeBackground()方法
rendersjbBackground(record, rowIndex, column){return this.renderTdBackground(record)},
处理自定义单元格
renderTdBackground(record, rowIndex, column){if(flag == 1){if(record.timeOver == 1 && column.name=='name'){return {style: {//可以设置任何你想要的样式 'background-color': 'rgb(25,250,250)',},}}}},
效果如下
纯属记录自己开发中遇到的问题 如有更优方案 还望不吝赐教
