记录vue3 Ant-Design-Vue table 改变某一单元格样式
a-table 中对单元格样式进行自定义。
·
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-table
bordered
: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)',
},
}
}
}
},
效果如下
纯属记录自己开发中遇到的问题 如有更优方案 还望不吝赐教
更多推荐
已为社区贡献1条内容
所有评论(0)