Vue + Element -Ui Table组件styl

前言 vue + element ui 已经成很多后台管理的选择框架，Table 表格也是最常用的组件之一

问题：

• 后台管理系统需要很多table 的展示，有时候需要对table某一列或者某一项进行不同的颜色展示进行区别

解决办法：cell-style、header-cell-style

第一步：el-table绑定 cell-style、header-cell-style

• header-cell-style ：是控制tabel标题头样式的
• cell-style：是控制tabel 数据样式的

    <el-table
          :data="tableData"
          height="100%"
          border
          style="width: 100%"
          :cell-style="timeStyle"
          :header-cell-style="headStyle"
        >
          <el-table-column
            align="center"
            fixed
            prop="date"
            label="日期"
            width="100"
          >
          </el-table-column>
        </el-table>

第二步：定义data数据

  data() {
    return {
      tableNav: [{
          id: "g_lprf",
          label: "粤教版",
          color: "#99f4b7",
        }, {
          id: "g_lprf_ch",
          label: "变化量",
          color: "#99f4b7",
        },  {
          id: "g_rprf",
          label: "人教版",
          color: "#98ddfc",
        }, {
          id: "g_rprf_ch",
          label: "变化量",
          color: "#98ddfc",
        } ],
      tableData: [
        {
          date: "2020-04-15",
          g_lprf: "-0.28",
          g_lprf_ch: null,
          g_rprf: "-0.93",
          g_rprf_ch: null,
        }, {
          date: "最大值",
          g_lprf: "-0.28",
          g_lprf_ch: null,
          g_rprf: "-0.93",
          g_rprf_ch: null,
        },{
          date: "最小值",
          g_lprf: "-0.28",
          g_lprf_ch: "0.00",
          g_rprf: "-0.93",
          g_rprf_ch: "0.00",
        },
      ],
    };
  },

第三步：定义cell-style、header-cell-style方法

  methods: {
    headStyle({ row, column, rowIndex, columnIndex }) {
      let obj = this.tableNav.find((val) => val.id === column.property);
      return `background-color: ${
        obj ? obj.color + " !important" : "#f7f8fa !important"
      }; color:#000 !important`;
    },
    timeStyle({ row, column, rowIndex, columnIndex }) {
      let obj = this.tableNav.find((val) => val.id === column.property);
      return `background-color: ${obj ? obj.color + "80" : "#fff"}; color:#000`;
    },
}

table 效果

注释：

• cell-style、header-cell-style 不仅仅可以更改颜色背景色，也可以更改其他的style样式 ，这里只是做个举例，
• 颜色我在数据中直接定死了，实际上，你也可以在data中单独定义。

gitee 地址

vue-question / element-tabel / table组件 / table样式（color）

相关文章：

Vue Element Table 跨页面多选功能