1.文档显示,table表格中有customCell属性
Column:列描述数据对象
参数 --------------------------------------- 说明------------------------------------------------------------------类型
2.vue页面使用
//template rowClassName
<a-table ref="table" :columns="columns" :dataSource="dataSource" :loading="loading"
:pagination="ipagination" :scroll="{x:true}" bordered size="middle" @change="handleTableChange" >
<div slot="alarmType" slot-scope="text, record">
<span> {{ text }}</span>
</div>
</a-table>
//script
<script>
export default {
data(){
return{
//表头
columns:[
{
title: "告警类型",
align: "center",
dataIndex: "typename",
scopedSlots: { customRender: "alarmType" },
customCell: this.getRowBackGround
}
]
}
},
methods:{
//根据条件table中customCell改变单元格样式
getRowBackGround(recordAlarm) {
// console.log("customCell改变单元格样式" + JSON.stringify(recordAlarm))
console.log("levelid------" + recordAlarm.levelid)
switch (recordAlarm.levelid) {//这里根据条件改变单元格背景色
case "0":
return { class: "table-color-default" }
case "1":
return { class: "table-color-success" }
case "2":
return { class: "table-color-processing" }
case "3":
return { class: "table-color-warning" }
case "4":
return { class: "table-color-error" }
default:
return { class: "table-color-default" }
}
},
}
}
</script>
<style>
.table-color-success {
color: #ffffff;
background-color: #0c8fcf;
}
.table-color-processing {
background-color: #FFFF00;
}
.table-color-warning {
color: #ffffff;
background-color: #FFA500;
}
.table-color-error {
color: #ffffff;
background-color: #FF0000;
}
.table-color-default {
color: #ffffff;
background-color: #808080;
}
</style>