el-table单元格背景色动态改变_vue eltable 单元格动态颜色

首先在el-table加上这个 :cell-style=“tableCellStyle”

<el-table :data="turnoutList" border :height="300" :cell-style="tableCellStyle">
	<el-table-column label="设备名称" width="110px" align="center" key="devName" prop="devName" fixed
                         sortable :show-overflow-tooltip="true">
        </el-table-column>
 </el-table>
1
2
3
4
5

然后是js方法

<script setup>
//这里是需要动态改变背景色的单元格，键是label，值是prop
const fieldMappings = {
  '设备名称': 'devName',
  '灯光配置': 'lightNum',
};

//动态改变单元格背景色
function tableCellStyle({ row, column, rowIndex, columnIndex }) {
  const fieldLabel = column.label;
  const fieldName = fieldMappings[fieldLabel];

  if (fieldName && (row[fieldName] === undefined || row[fieldName] === '')) {
    return { 'background-color': 'red' };
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果如下，第一行有值，第二行没值背景色为红色