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;
}
相关推荐
boooooooom6 分钟前
Pinia必学4大核心API:$patch/$reset/$subscribe/$onAction,用法封神!
javascript·vue.js·面试
wxin_VXbishe9 分钟前
C#(asp.net)学员竞赛信息管理系统-计算机毕业设计源码28790
java·vue.js·spring boot·spring·django·c#·php
不会敲代码121 分钟前
解密JavaScript内存机制:从执行上下文到闭包的全景解析
javascript
NEXT0627 分钟前
React Hooks 进阶:useState与useEffect的深度理解
前端·javascript·react.js
哈里谢顿40 分钟前
Vue 3 入门完全指南:从零构建你的第一个响应式应用
vue.js
踢足球09291 小时前
寒假打卡:2026-2-7
java·开发语言·javascript
楚轩努力变强1 小时前
iOS 自动化环境配置指南 (Appium + WebDriverAgent)
javascript·学习·macos·ios·appium·自动化
John_ToDebug2 小时前
引擎深处的漫游者:构建浏览器JavaScript引擎的哲学与技艺
javascript·chrome·js
程序猿阿伟2 小时前
《TypeScript中Protobuf到运行时类型安全的转换指南》
javascript·安全·typescript
三十_A2 小时前
零基础通过 Vue 3 实现前端视频录制 —— 从原理到实战
前端·vue.js·音视频