vue 给特定满足条件的表单数据添加背景颜色,组件的 row-class-name
【代码】vue 给特定满足条件的表单数据添加背景颜色,组件的 row-class-name。
·
1、:row-class-name="tableRowClassName" 可为表格每行根据后面的函数绑定class名
<!-- 列表框 -->
<div class="tableList">
<el-table :data="teamModelListTable" style="width: 100%"
@selection-change="handleSelectionChange"
:row-class-name="tableClassNameRow"
tooltip-effect="dark"
id="newGridList"
ref="gridShouldRespondList">
<el-table-column
type="selection"
:reserve-selection="false"
></el-table-column>
<el-table-column label="序号" type="index" width="100" align="center">
<template slot-scope="scope">{{
scope.$index + 1 + pageSize * (currentPage - 1)
}}
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="feedName" label="反馈人" ></el-table-column>
<el-table-column show-overflow-tooltip prop="gridName" label="网格名称" ></el-table-column>
<el-table-column show-overflow-tooltip prop="finishSituation" label="完成情况"></el-table-column>
<el-table-column show-overflow-tooltip prop="isFinished" label="是否完成"></el-table-column>
</el-table>
methods: {
tableClassNameRow(row, rowIndex) {
console.log(row)
if (row){
if (row.isFinished != null || row.isReceived != null ){
return 'is-finished-filled';
}else {
return '';
}
}
},
...其他方法
}
.is-finished-filled {
background-color: #07e56c !important; /* 高亮颜色,可以根据需求自定义 */
font-weight: bold; /* 另外一种可能的高亮方式 */
}
2、效果图
更多推荐
已为社区贡献1条内容
所有评论(0)