<el-table-column 设置满足条件字体颜色
时间: 2023-11-08 22:05:51 浏览: 85
layui table设置某一行的字体颜色方法
您可以使用 scoped slot 的方式来自定义单元格的渲染,然后在渲染时根据条件设置对应的样式。具体实现可以参考以下代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<template slot-scope="{ row }">
<span :style="{ color: row.age > 18 ? 'red' : 'green' }">{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 16 },
{ name: '王五', age: 25 }
]
}
}
}
</script>
```
在上述代码中,我们使用了 `slot-scope` 来获取当前行的数据,然后根据 `age` 字段的值来设置字体颜色。
阅读全文