vue el-tabel表格嵌套

在Vue.js中，`el-table` 是 Element UI 提供的一个用于展示表格的组件，可以方便地处理数据的展示。如果需要创建一个表格嵌套，通常是指在一个表格单元格内显示另一个完整的子表格。这可以使用 `rowspan` 和 `colspan` 属性来实现行跨列或多行，并通过设置`v-for`指令来渲染嵌套的数据。

下面是一个简单的例子：

<template>
  <el-table :data="nestedData">
    <el-table-column prop="parentName" label="父级名称"></el-table-column>
    <el-table-column prop="subList" label="子列表">
      <el-table v-for="(item, index) in $index+1" :key="index" :row="item">
        <el-table-column prop="itemName" label="子项名称"></el-table-column>
      </el-table>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      nestedData: [
        { parentName: '父1', sublist: [{ itemName: '子1-1' }, { itemName: '子1-2' }] },
        { parentName: '父2', sublist: [{ itemName: '子2-1' }, { itemName: '子2-2' }] }
      ]
    };
  }
};
</script>

在这个例子中，`sublist` 列显示的是一个动态生成的子表格，每个父级行都有其对应的子表格。注意我们在子表格中使用了 `$index+1` 来计算实际的索引，因为 Vue 的数组索引从0开始，而HTML默认的表格行是从1开始的。