当前位置: 首页 > article >正文

el-table中根据状态改单元格样式

需求:el-table中,有一列需要根据状态不同,显示的样式也不通。

解决方法: :cell-style="cellStyle"

   <el-table
        :data="tableData"
        style="width: 100%"
        size="mini"
        border
        :header-cell-style="{ textAlign: 'center', color: '#606266' }"
        :cell-style="cellStyle"
      >

   <el-table-column prop="result" label="检测结果"></el-table-column>
  </el-table>

    // 当监测结果为 已携带 的状态,加上背景色,字体颜色
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.result == '携带' && column.label == '检测结果') {
        return 'background:#d9001b;textAlign: center;color:#fff;'
      } else {
        return 'textAlign: center'
      }
    },


http://www.kler.cn/a/319177.html

相关文章:

  • 表的数据结构和常见操作
  • IOT物联网低代码可视化大屏解决方案汇总
  • SpringCloud 微服务消息队列灰度方案 (RocketMQ 4.x)
  • linux上海康SDK安装并设置环境变量
  • FluentUI使用
  • `node-gyp` 无法找到版本为 `10.0.19041.0` 的 Windows SDK
  • 医学数据分析实训 项目五 分类分析--乳腺癌数据分析与诊断
  • mybatis-plus公共字段自动填充fillStrategy()方法和strictFill()方法
  • Windows环境运行.sh脚本提示找不到wget指令的问题
  • CSS基本概念以及CSS的多种引入方式
  • Python模拟真人鼠标轨迹算法
  • 使用umy-ui 优化带有大量输入框、下拉框的ElementUI el-table
  • Leetcode 1472. 设计浏览器历史记录
  • 开源音频处理项目推荐【持续更新】
  • 《C++设计新思维-泛型编程与设计模式之应用》阅读记录
  • DY按图搜索商品API:解锁电商新趋势
  • LeetCode 257. 二叉树的所有路径,dfs
  • 29. RabbitMQ队列模型
  • 多用户自定义商城小程序源码系统 独立部署 到源代码包以及搭建部署教程
  • 根据源码解析Vue2中对于对象的变化侦测
  • 搭建HAproxy----7层负载均衡集群
  • FDA辅料数据库在线免费查询-药用辅料
  • 灵当CRM multipleUpload.php 文件上传致RCE漏洞复现
  • 双11好物推荐有哪些?五大双十一好货推荐!
  • PHP如何从字符串中删除转义字符
  • 抽奖拼团卷轴模式系统开发小程序源代码解析