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;
}
相关推荐
东北甜妹12 分钟前
Redis Cluster 部署
前端·javascript·bootstrap
HoneyMoose16 分钟前
Jenkins 构建 VUE 前端提示 pnpm 错误
前端·vue.js·jenkins
小李子呢021124 分钟前
前端八股---axios封装
java·前端·javascript
im_AMBER27 分钟前
Leetcode 156 旋转图像 | 矩阵置零
javascript·数据结构·算法·leetcode
Highcharts.js28 分钟前
在 Next.js App Router 中使用 Highcharts Stock(完整实战指南 )
开发语言·javascript·ecmascript
万邦科技Lafite38 分钟前
通过淘宝关键词API接口批量获取商品信息指南
java·前端·javascript
jingxindeyi39 分钟前
electron 配置 shadcn-ui
javascript·ui·electron
落魄江湖行1 小时前
基础篇九 Nuxt4 插件系统:扩展 Nuxt 能力
前端·vue.js·typescript·nuxt4
程序员小寒1 小时前
JavaScript设计模式(十):模板方法模式实现与应用
前端·javascript·设计模式·模板方法模式
七月稻草人1 小时前
Spring Boot + Vue 3 全栈项目,内网穿透实现 HTTPS 公网访问,前后端分离部署方案
vue.js·spring boot·https