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

我有个数据是这样的。

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像渲染成这样，除了把数组扁平化，有没有其他方法。

回答：

有一个折中的属性可以使用:
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>