elementplus多级动态表头遇到的问题

看起来你的数据没有渲染出来的问题可能在于你的 prop 属性的设置。在你的代码中，你试图通过 :prop="item.attrValue" 来访问数据，然而在你的 skuList 数组中，attrValue 是属性的值，而不是数据的键。

你需要将 attrValue 的值作为数据对象的键，这样才能在表格中正确显示数据。你可能需要调整你的数据结构以便将 attrValue 的值作为键，或者你可以创建一个方法来在你的数据中查找对应的值。

另外，你需要在 el-table-column 组件中使用 v-for 指令来循环渲染你的属性列，而不是在 el-table-column 内部再嵌套一个 el-table-column。这是因为 el-table-column 组件不支持嵌套。

这是一个基本的示例，你可以根据自己的需要进行调整：

<el-table :data="skuList" style="width: 100%">
  <el-table-column v-for="(attr, index) in skuList[0].attr" :key="index" :label="attr.attrName">
    <template slot-scope="scope">
      {{ scope.row.attr.find(a => a.attrId === attr.attrId).attrValue }}
    </template>
  </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>

在这个示例中，使用了 slot-scope 来访问当前行的数据，并找到了与当前属性对应的值。注意，这个示例假设你的每个 sku 都有相同的属性顺序和数量。如果你的数据有不同的属性顺序或数量，你可能需要更复杂的逻辑来处理这种情况。

多级表头一般是通过嵌套的 组件实现的。您可以参考 element-plus 的官方文档中关于表格的多级表头示例：https://element-plus.eleme.cn/#/zh-CN/component/table#multiple-table-header

1. 如果您使用的是 Vue 3，可以考虑使用 defineComponent 函数来创建组件，这样可以更好地利用 Vue 3 的特性。例如：

import { defineComponent } from 'vue';
export default defineComponent({
components: {
ElTable,
ElTableColumn,
},
// ...
});
CopyCopy

1. 如果您在渲染数据时遇到了问题，请检查您的数据源是否正确，以及数据绑定是否正确。例如，您可以使用 v-for 指令来遍历数据并渲染表格行：

CopyCopy

这种复杂的表格数据渲染优先自定义模板实现，而不是使用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">
          <template #default="scope">
            <span>{{scope.row.attr[index].attrValue}}</span>
          </template>
        </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>

可以实现效果

代码看起来没有问题，检查一下key唯一值，并查询一下集合的数据是否正常