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;
}
相关推荐
一只小阿乐2 分钟前
react 中的组件性能优化
前端·javascript·react.js·react组件性能优化
xiaoxue..24 分钟前
二叉树深度解析:从基础结构到实战应用
javascript·数据结构·面试
月巴月巴白勺合鸟月半38 分钟前
一个医学编码的服务
服务器·前端·javascript
JS_GGbond38 分钟前
给DOM元素加超能力:Vue自定义指令入门指南
前端·vue.js
T___T39 分钟前
用 Vite 搭建现代化 Vue 3 项目:从零到工程化入门
前端·vue.js
方也_arkling43 分钟前
【JS】定时器的使用(点击开始计时,再次点击停止计时)
开发语言·前端·javascript
JS_GGbond44 分钟前
Vue原型链:让你的组件继承“超能力”
前端·vue.js
乆夨(jiuze)1 小时前
不是所有的链式调用,都是Promise函数,Promise 规范及其衍生的 Promise/A+ 规范
前端·javascript·vue.js
锦瑟弦音1 小时前
跑酷游戏开发笔记3 && 游戏开始场景 cocos 3.8.7
javascript·笔记·游戏
ttod_qzstudio1 小时前
Vue 3 的魔法:用 v-bind() 让 CSS 爱上 TypeScript 常量
css·vue.js·typescript