elementplus动态表头、多级表头怎么实现？

Question

背景：在模仿谷粒商城的后台前端项目的时候，遇到了一个问题。
我想要的效果是

这个涉及到了多级表头，我的想法是使用elementplus-plus的表格来实现。但是却无法渲染出来。
我现在有一个数组

skuList=[{"skuName":"","attr":[{"attrId":"1","attrName":"机身颜色","attrValue":"zz"},{"attrId":"3","attrName":"版本","attrValue":"11"}]},{"skuName":"","attr":[{"attrId":"1","attrName":"机身颜色","attrValue":"aa"},{"attrId":"3","attrName":"版本","attrValue":"11"}]},{"skuName":"","attr":[{"attrId":"1","attrName":"机身颜色","attrValue":"qq"},{"attrId":"3","attrName":"版本","attrValue":"11"}]},{"skuName":"","attr":[{"attrId":"1","attrName":"机身颜色","attrValue":"zz"},{"attrId":"3","attrName":"版本","attrValue":"22"}]},{"skuName":"","attr":[{"attrId":"1","attrName":"机身颜色","attrValue":"aa"},{"attrId":"3","attrName":"版本","attrValue":"22"}]},{"skuName":"","attr":[{"attrId":"1","attrName":"机身颜色","attrValue":"qq"},{"attrId":"3","attrName":"版本","attrValue":"22"}]}]

我这样使用：

 <el-table :data="skuList" style="width: 100%">
      <el-table-column label="属性组合">
        <el-table-column
            v-for="(item,index) in skuList[0].attr"
            :key="index"
            :label="item.attrName" :prop="item.attrValue">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="skuName" label="商品名称" width="180"/>
<--这后面的还没有写-->
      <el-table-column prop="address" label="标题"/>
      <el-table-column prop="address" label="副标题"/>
      <el-table-column prop="address" label="价格"/>
    </el-table>

结果却是这样

attrValue的值无法渲染出来，我大概知道问题出来哪里，应该是v-for那里的prop不能绑定成功，我尝试询问文心一言，但是他的回答也是有问题，

 <el-table :data="skuList" style="width: 100%">
      <el-table-column label="属性组合">
        <el-table-column
            v-for="(item,index) in skuList[0].attr"
            :key="index"
            :label="item.attrName" :prop="'attrValue'">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="skuName" label="商品名称" width="180"/>
<--这后面的还没有写-->
      <el-table-column prop="address" label="标题"/>
      <el-table-column prop="address" label="副标题"/>
      <el-table-column prop="address" label="价格"/>
    </el-table>

没什么效果，甚至还有这种，

  <div>
    <el-table :data="skuList" style="width: 100%">
      <el-table-column label="属性组合">
        <el-table-column
            v-for="(item,index) in skuList[0].attr"
            :key="index"
            :label="item.attrName" >
          <el-table-column v-for="(attr,index2) in item " :key="index2" :prop="'attrId'" label="所属的属性编号"></el-table-column>
          <el-table-column v-for="(attr,index2) in item " :key="index2" :prop="'attrName'" :label="'attrName'"></el-table-column>
          <el-table-column v-for="(attr,index2) in item " :key="index2" :prop="'attrValue'" label="attrValue"></el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="skuName" label="商品名称" width="180"/>
      <el-table-column prop="address" label="标题"/>
      <el-table-column prop="address" label="副标题"/>
      <el-table-column prop="address" label="价格"/>
    </el-table>
  </div>

直接炸了，于是我放弃了询问文心一言，想得到广大网友的帮助

Answer 1

【相关推荐】

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7649405

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^