项目经验 | element-ui el-table处理二级嵌套列表和单元格颜色

在做一个项目中碰到的问题，就是当你要传入el-table的数据是一个类似如下的嵌套二级列表：

[
  {
    "id": 1,
    "username": "root",
    "score": 0,
    "penalty": 240,
    "problemScore": [
      { "id": 1, "accepted": false, "error": 0, "timeUsage": 0},
      { "id": 2, "accepted": true, "error": 0, "timeUsage": 120},
      { "id": 3, "accepted": true, "error": 0, "timeUsage": 240}
    ]
  },
  {
    "id": 2,
    "username": "tets",
    "score": 0,
    "penalty": 640,
    "problemScore": [
      { "id": 1, "accepted": true, "error": 0, "timeUsage": 20 },
      { "id": 2, "accepted": true, "error": 0, "timeUsage": 300},
      { "id": 3, "accepted": true, "error": 0, "timeUsage": 640}
    ]
  },
  {
    "id": 3,
    "username": "test2",
    "score": 0,
    "penalty":300,
    "problemScore": [
      { "id": 1, "accepted": false, "error": 0, "timeUsage": 0},
      { "id": 2, "accepted": false, "error": 0, "timeUsage": 0},
      { "id": 3, "accepted": false, "error": 0, "timeUsage": 0}
    ]
  }
]

并且要达到这样的效果：

效果图片

需要解决的困难为：

如何在el-table中传入第二级列表元素，并且在能够把这些元素追加在一级列表的列后面？

直接上代码，我的处理方法是：
二级列表的长度用problemScore.lenght是读取不到的，因为这个table内属性在vue的层面上是读取不到的，prop接收的只是一个字符串(注意它没有用:prop而是prop)，所以要用v-for还是得事先用this.problemSize = this.rankData[0].problemScore.length 把二级列表的长度提取出来让v-for能够正常进行。
接着就是最重要的一句：:prop="`problemScore[${index-1}].displayText`" 因为我们知道prop接收的只是一个字符串，所以我们用可以es6的模板字符串来把这个字符串对象传给prop，这样就能满足我们的需求。

<el-table
      :data="rankData"
      style="width: 100%"
      :cell-style="cellStyle"
      border
    >
      <el-table-column
        label="#"
        type="index"
      />
      <el-table-column
        label="用户名"
        prop="username"
        width="120"
      />
      <el-table-column
        label="总分数"
        prop="score"
        width="80"
      />
      <el-table-column
        label="总用时"
        prop="displayPenalty"
        width="100"
      />
      <el-table-column
        v-for="index in problemSize"
        :key="index"
        :prop="`problemScore[${index-1}].displayText`"
        :label="index.toString()"
      />
    </el-table>

关于单元格颜色。
这里我事先在数据请求完后用forEach对需要红色的单元格带上了colorType=2，需要绿色的单元格带上了colorType=1，然后用了:cell-style="cellStyle"来给el-table绑定颜色渲染方法。
因为table的每一行rowIndex和数据的每一行对应，列columnIndex-4对应着数据的第二级列表的每一项，因此cellStyle方法写成了下面这样：

    cellStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex >= 4 && this.rankData[rowIndex].problemScore[columnIndex - 4].colorType === 1) {
        return 'background:#67C23A;color:white;'
      } else if (columnIndex >= 4 && this.rankData[rowIndex].problemScore[columnIndex - 4].colorType === 2) {
        return 'background:#F56C6C;color:white;'
      } else {
        return ''
      }
    },

项目经验 | element-ui el-table处理二级嵌套列表和单元格颜色

推荐阅读更多精彩内容