element plus table 表格数据如何循环渲染？

Question

我有个数据是这样的。

const res = [
    {
        name: "张三",
        power: "2",
        week: [
            {
                action: "吃饭"
            },
            {
                action: "睡觉"
            }
        ],
        end: "评语：死不足惜"
    },
     {
        name: "李四",
        power: "3",
        week: [
            {
                action: "作死"
            },
            {
                action: "大家"
            }
        ],
        end: "21asdasd"
    },
]

代码：

<el-table :border="true" :data="res">
        <el-table-column prop="name" label="姓名" width="180" />
         <el-table-column prop="power" label="力量” width="180" />
         <el-table-column :prop="x.name" :label="x.num" v-for="x in  xx.week" width="180" />
         <el-table-column prop="end" label="评价" width="180" />
</el-table>

这里由于书对象数组里面的子节点又是对象数组，不知道在el-table上绑定res值后，里面的el-table-column怎么拿到子节点的对象数组，也就是 xx.week。

使用table像渲染成这样，除了把数组扁平化，有没有其他方法。

姓名	力量	周一	周二	评价
张三	2	吃饭	睡觉	评语：死不足惜
李四	3	作死	大家	21asdasd

Answer 1

['周一','周二'] 的索引需要和week索引相对应

<el-table-column :label="item" align="center" :prop="`week.${index}.action`" v-for="(item,index) in ['周一','周二']" :key="index"></el-table-column>

Answer 2

有一个折中的属性可以使用:
https://element.eleme.io/#/zh-CN/component/table#table-column...

formatter 用来格式化内容 Function(row, column, cellValue, index)

处理结果如下:

代码如下:

<template>
  <div class="hello">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="name" width="180"> </el-table-column>
      <el-table-column prop="power" label="power" width="180">
      </el-table-column>
      <el-table-column
        prop="week"
        label="week"
        :formatter="formatter"
      ></el-table-column>
      <el-table-column prop="end" label="end" width="180"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      tableData: [
        {
          name: "张三",
          power: "2",
          end: "评语：死不足惜",
          week: [
            {
              action: "吃饭",
            },
            {
              action: "睡觉",
            },
          ],
        },
        {
          name: "李四",
          power: "3",
          week: [
            {
              action: "作死",
            },
            {
              action: "大家",
            },
          ],
          end: "21asdasd",
        },
      ],
    };
  },
  methods: {
    formatter(row, column) {
      let actionList = [];
      row.week.forEach((v) => {
        actionList.push(v.action);
      });
      return actionList.join("|");
    },
  },
};
</script>

Answer 3

还真实现不了。有两个办法。

1. 先 get 一下最大的，然后直接遍历固定变量
2. 使用插槽，然后内部自己渲染

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。