el-table展开行表格嵌套表格怎么写

el-table展开行表格嵌套表格可以通过以下步骤实现：

1.在el-table中定义一个scoped slot（例如，slot-scope="scope"），以便访问每一行的数据。

2.在scoped slot中创建一个新的el-table组件，用于显示嵌套表格。设置el-table的data属性为当前行的数据（例如，:data="scope.row.items"）。

3.在嵌套表格中定义列（例如，使用el-table-column组件），并在其中填充数据。

4.如果需要进一步嵌套表格，则可以在嵌套表格中创建另一个el-table组件，并在其中重复上述步骤。

下面是一个示例代码：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column label="Items">
      <template slot-scope="scope">
        <el-table :data="scope.row.items">
          <el-table-column prop="itemName" label="Item Name"></el-table-column>
          <el-table-column prop="itemPrice" label="Item Price"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John',
          age: 22,
          items: [
            { itemName: 'Item 1', itemPrice: 10 },
            { itemName: 'Item 2', itemPrice: 20 },
          ],
        },
        {
          name: 'Mary',
          age: 30,
          items: [
            { itemName: 'Item 3', itemPrice: 15 },
            { itemName: 'Item 4', itemPrice: 25 },
          ],
        },
      ],
    };
  },
};
</script>

在这个示例中，我们在“Items”列中创建了一个嵌套的el-table组件，并使用scope.row.items作为数据源。在嵌套表格中，我们定义了两个列，分别显示“Item Name”和“Item Price”。这样，当用户展开行时，就会显示嵌套的表格。