ElementUI中el-table组件单元格样式自定义设置

在 ElementUI 中，el-table 组件提供了丰富的功能来展示和操作表格数据。为了满足不同的业务需求，我们经常需要对表格中的单元格进行样式定制。本文将详细介绍如何通过 cell-style 属性来自定义单元格样式。

首先，在 el-table 标签上绑定 cell-style 属性，如下所示：

然后，在 methods 方法中定义 changeCellStyle 函数，该函数接收四个参数：row（当前行的数据）、column（当前列的属性）、rowIndex（当前行的索引）和 columnIndex（当前列的索引）。通过这些参数，我们可以根据具体条件为单元格设置不同的样式。

methods: {  // 表体字体颜色设置  changeCellStyle({ row, column, rowIndex, columnIndex }) {    if (row.yoyStatus === 1 && columnIndex === 6) {      return 'color: #FF3B4B';    }    if (row.momStatus === 1 && columnIndex === 7) {      return 'color: #FF3B4B';    }  },  // 高亮错误信息  setTableCellStyle({ row, column, rowIndex, columnIndex }) {    if (row.guangZhouOver) {      if (column.property === 'guangZhou') {        return 'background: red';      }    }  }}

以上代码示例展示了如何根据行和列的数据动态设置单元格的字体颜色和背景色。通过这种方式，我们可以灵活地控制表格中每个单元格的样式，以满足不同的业务需求。