elementui表格单元格样式
时间: 2023-05-27 13:06:15 浏览: 226
可以通过 ElementUI 的 `cell-style` 属性来设置单元格的样式,具体步骤如下:
1. 在表格列定义中,添加 `cell-style` 属性,值为一个函数,该函数接受两个参数:当前单元格的值和当前行数据。
```
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<span :style="cellStyle(scope.row.name, scope.row)">{{ scope.row.name }}</span>
</template>
</el-table-column>
```
2. 在 `methods` 中定义 `cellStyle` 函数,该函数根据单元格的值和行数据返回一个对象,该对象中包含需要设置的样式属性。
```
methods: {
cellStyle (value, row) {
if (value === '张三') {
return { color: 'red' }
} else if (value === '李四') {
return { color: 'blue' }
} else {
return {}
}
}
}
```
上述代码中,如果单元格的值为“张三”,则设置字体颜色为红色;如果单元格的值为“李四”,则设置字体颜色为蓝色;否则不设置任何样式。
需要注意的是,`cell-style` 属性设置的样式会覆盖掉 ElementUI 默认的样式,因此使用时需要确保样式不会影响表格的布局和功能。
阅读全文
相关推荐


















