element table 单元格颜色

2024年4月8日发(作者：)

element table 单元格颜色

在 Element UI 的表格组件中，可以通过使用 `cell-style` 属性来

自定义单元格的颜色。这个属性接受一个方法，该方法会根据行和列

的数据返回一个样式对象，你可以在这个对象中指定背景颜色和文字

颜色等。

例如，下面的代码会将所有姓名是 "张三" 的单元格的背景色设置为

粉色，文字颜色设置为白色：

```vue

:data="tableData"

style="width: 100%"

:cell-style="cellStyle">

prop="date"

label="日期"

width="180">

prop="name"

label="姓名"

width="180">

```

在 methods 中定义 cellStyle 方法：

```javascript

methods: {

cellStyle({row, column, rowIndex, columnIndex}) {

if ( === '张三') {

return { backgroundColor: 'pink', color: 'white' };

}

}

}

```

此外，你还可以通过 `row-class-name` 属性来为行添加自定义的类

名，然后通过 CSS 来改变单元格的颜色。例如：

```vue

:data="tableData"

style="width: 100%"

:row-class-name="rowClassName">

prop="date"

label="日期"

width="180">

prop="name"

label="姓名"

width="180">

```

在 methods 中定义 rowClassName 方法：

```javascript

methods: {

rowClassName({row, rowIndex}) {

if ( === '张三') {

return 'red-row'; // 为姓名是 '张三'

row'，然后在 CSS 中定义这个类名的样式。

}

'red-的行添加类名

}

}

```