el-table 修改某一列的单元格背景色

最新推荐文章于 2024-07-30 10:39:47 发布

LUNA~

最新推荐文章于 2024-07-30 10:39:47 发布

阅读量1.4k

点赞数

分类专栏： elementui 文章标签： html 前端

本文链接：https://blog.csdn.net/CMDN123456/article/details/130647274

版权

elementui 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue.js应用中为表格的特定列设置样式。首先，建议使用插槽来实现。然后，定义变量并绑定样式。在methods中定义一个名为tableCellStyle的方法，根据columnIndex和row.state进行条件判断，以此来改变表格单元格的背景色和字体色。例如，当列索引为1且状态为未维护时，背景色设为蓝色，字体色设为白色；若列索引为3，则设置特殊的圆角样式。

摘要由CSDN通过智能技术生成

1. 案例

2. 实现方法

2.1 给单独某一列设置，首先:第一步想到的是用插槽。

ps：最好是跟我一样，样式不要在这个上面写，先定一个变量。

2.2 定义变量

2.3 在最开始绑定样式(咱就乖乖的用人家官网上的即可)

ps: columnIndex :列数，从0开始数，我这一列是 3

ps：tableCellStyle 是个方法名，不是个类名哦！！

// 在methods 里面写啊！！！

// 背景颜色处理
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log("背景色：");
      // console.log("row===:", row);
      // console.log("column===:", column);
      // console.log("rowIndex===:", rowIndex);
      // console.log("columnIndex===:", columnIndex);
      if (columnIndex === 1) {
        // 表格的第11行做处理
        if (row.state == "未维护") {
          // 如果是未维护 背景色蓝色，字体色白色
          return "background:#c7a027; color:#6c3a00";
        } else {
          return "background:yellow;color:#6c3a00";
        }
      } else if (columnIndex === 3) {
        this.numcolStyle =
          "background: rgb(117, 178, 229);
           display: block;
           width: 26px;
           height: 26px;
           color: rgb(255, 255, 255);
           padding: 3% 0px 0px;
           border-radius: 50%;
           margin:0 auto;";
      }
    },