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;
}
相关推荐
coding随想1 小时前
JavaScript ES6 解构:优雅提取数据的艺术
前端·javascript·es6
年老体衰按不动键盘1 小时前
快速部署和启动Vue3项目
java·javascript·vue
灵感__idea1 小时前
JavaScript高级程序设计(第5版):无处不在的集合
前端·javascript·程序员
星辰引路-Lefan2 小时前
深入理解React Hooks的原理与实践
前端·javascript·react.js
江城开朗的豌豆2 小时前
JavaScript篇:函数间的悄悄话:callee和caller的那些事儿
javascript·面试
江城开朗的豌豆2 小时前
JavaScript篇:回调地狱退散!6年老前端教你写出优雅异步代码
前端·javascript·面试
TE-茶叶蛋3 小时前
Vue Fragment vs React Fragment
javascript·vue.js·react.js
Angindem3 小时前
从零搭建uniapp项目
前端·vue.js·uni-app
Carlos_sam4 小时前
Opnelayers:封装Popup
前端·javascript
MessiGo4 小时前
Javascript 编程基础(5)面向对象 | 5.1、构造函数实例化对象
开发语言·javascript·原型模式