element-table表格中插入颜色块显示数据状态的示例代码
作者：LXXgalaxy
这篇文章主要介绍了element-table表格中插入颜色块显示数据状态,代码部分分为dom部分和data部分及css部分,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
element-table表格中插入颜色块显示数据状态
dom部分：
<el-table-column label="是否异常">
<template slot-scope="scope">
<div class="dcs_sf_red" v-if="scope.row.sfyc == 0"></div>
<div class="dcs_sf_green" v-if="scope.row.sfyc == 1"></div>
</template>
</el-table-column>data部分：
data [
{
date: '00:00',
mode: '固定模式',
jhz: 120,
sfyc: 0,
sjz: 120,
sfxy: 1,
fkz: 110,
cgfs: 1,
}]css部分
.dcs_sf_red{
margin-left: 30%;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #FE685D;
}
.dcs_sf_green{
margin-left: 30%;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #5DFE96;
}element-plus的表格固定列不变颜色的解决办法
前言:有的行需要变颜色 所以我们用到了row-class-name方法 但是固定列没有变颜色
<el-table :row-class-name="tableRowClassName">xxx</el-table>
const tableRowClassName = (value) => {
if (JSON.stringify(row.stopApplyType) != 'null') {
console.log('停发')
return 'error-row'
} else {
return ''
}
}
<style>
.el-table .error-row {
--el-table-tr-bg-color: var(--el-color-error-light-9);
}
</style>
这样是非常不美观的 所以我看了一下固定列的css 绑定的class
然后我们在app.vue加入以下代码
.el-table-fixed-column–left 是针对固定在左侧的固定列
.el-table-fixed-column–right 是针对固定在右侧的固定列
//红色的
.el-table .error-row {
--el-table-tr-bg-color: var(--el-color-error-light-9);
}
.el-table .error-row .el-table-fixed-column--left {
background-color: #fef0f0;
}
.el-table .error-row .el-table-fixed-column--right {
background-color: #fef0f0;
}
这样的话就变美观了很多 解决问题！
到此这篇关于element-table表格中插入颜色块显示数据状态的文章就介绍到这了,更多相关element-table表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！