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;
}
相关推荐
阿桂有点桂40 分钟前
React使用笔记(持续更新中)
前端·javascript·react.js·react
im_AMBER1 小时前
React 15
前端·javascript·笔记·学习·react.js·前端框架
蒲公英源码1 小时前
基于PHP+Vue+小程序快递比价寄件系统
vue.js·小程序·php
许___3 小时前
el-table多选模式下跨分页保留当前页选项
javascript·vue.js
梦想平凡3 小时前
情怀源代码工程实践(加长版 1/3):确定性内核、事件回放与最小可运行骨架
开发语言·javascript·ecmascript
爱吃甜品的糯米团子3 小时前
详解 JavaScript 内置对象与包装类型:方法、案例与实战
java·开发语言·javascript
华仔啊3 小时前
JavaScript + Web Audio API 打造炫酷音乐可视化效果,让你的网页跟随音乐跳起来
前端·javascript
程序定小飞4 小时前
基于springboot的学院班级回忆录的设计与实现
java·vue.js·spring boot·后端·spring
是你的小橘呀4 小时前
深入理解 JavaScript 预编译:从原理到实践
前端·javascript
攀小黑4 小时前
基于若依-内容管理动态修改,通过路由字典配置动态管理
java·vue.js·spring boot·前端框架·ruoyi