element plus如何为表格某列数据文字设置颜色样式
作者：燕哥学前端
实习工作需要根据表格的状态字段来设置列的样式,所以这篇文章主要给大家介绍了关于element plus如何为表格某列数据文字设置颜色样式的相关资料,需要的朋友可以参考下
有时候业务需要，需要将表格里的数据换上不同颜色的样式，以便查看，查看官方文档，有一个属性可以修改表格的样式
话不多说，放代码：
<el-table ref="multipleTableRef"
:data="tableData"
style="width: 100%"
@selection-change="selectionChange"
:cell-style="cellStyle"
>
...
<el-table-column property="type" label="一级分类">
</el-table-column>
<el-table-column property="classify" label="二级分类"/>
...
<el-table-column property="standardState" label="标准状态"/>
</el-table>
js：
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
// 状态列字体颜色
// columnIndex 列下标
// rowIndex 行下标
// row 行
// column 列
if (row.type !=null && columnIndex === 3) {
return { color: "#189EFF" };
}else if (row.classify != null && columnIndex === 4) {
return { color: "#189EFF" };
} else if (row.standardState =='现行' && columnIndex === 6) {
return { color: "#1CD66C" };
} else if (row.standardState == '即将实施' && columnIndex === 6) {
return { color: "#189EFF" };
} else if (row.standardState == '废止' && columnIndex === 6) {
return { color: "red" };
}
}
总结
到此这篇关于element plus如何为表格某列数据文字设置颜色样式的文章就介绍到这了,更多相关elementplus表格列数据设置颜色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！