element-ui table 改变一行的样式 row-style 失效问题

**需求:根据后端返回的颜色值 改变table表格中每行的背景颜色
**element-ui table 改变一行的样式 row-style 失效问题_第1张图片
element-ui table 改变一行的样式 row-style 失效问题_第2张图片
代码:

  <el-table
      ref="table"
      :header-cell-style="{ color: '#FFF', background: '#333' }"
      :data="queueTaskList"
      style="width: 100%; color: #ffffff"
      :row-style="tableRowStyle"
    >
 tableRowStyle({ row, rowIndex }) {
      console.log(row.taskColor, "-->row.taskColor");
      let rowBackground = {};
      if (row.taskColor) {
        rowBackground.background = row.taskColor;
      } else {
        rowBackground.background = "#333";
      }
      return rowBackground;
    },

注意:
最新版本的element-ui 关于table row-style 失效
之前是return str 样式字符串,新文档需要返回Object,因此需要改变

element-ui table 改变一行的样式 row-style 失效问题_第3张图片
如果项目中 表格组件也使用了cell-style属性 row-style 也会失效的

你可能感兴趣的:(element,javascript,vue.js)