vue2 封装一个el-table 可以实现展开行嵌套表格

可以使用`el-table`的`expand-row-keys`属性来实现展开行，并在展开行中再嵌套一个`el-table`来实现嵌套表格的效果。具体实现步骤如下：

1. 在父组件中引入`el-table`和需要展示的子组件。

<template>
  <el-table :data="tableData" :expand-row-keys="expandRowKeys">
    <!-- 父表格的列 -->
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column type="expand">
      <!-- 展开行中嵌套的子表格 -->
      <child-table></child-table>
    </el-table-column>
  </el-table>
</template>

<script>
import ChildTable from './ChildTable.vue'
export default {
  components: { ChildTable },
  data() {
    return {
      tableData: [{ name: '张三', age: 18 }, { name: '李四', age: 20 }],
      expandRowKeys: []
    }
  }
}
</script>

2. 在子组件`ChildTable`中也使用`el-table`来展示数据。

<template>
  <el-table :data="tableData">
    <el-table-column prop="subject" label="科目"></el-table-column>
    <el-table-column prop="score" label="分数"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{ subject: '语文', score: 90 }, { subject: '数学', score: 85 }]
    }
  }
}
</script>

3. 在父组件中监听展开行的事件，并记录展开的行的`key`值，用于判断哪些行需要展开子表格。

<template>
  <el-table :data="tableData" :expand-row-keys="expandRowKeys" @expand-change="handleExpandChange">
    <!-- 父表格的列 -->
  </el-table>
</template>

<script>
import ChildTable from './ChildTable.vue'
export default {
  components: { ChildTable },
  data() {
    return {
      tableData: [{ name: '张三', age: 18 }, { name: '李四', age: 20 }],
      expandRowKeys: []
    }
  },
  methods: {
    handleExpandChange(row, expandedRows) {
      // 获取展开行的key值
      const keys = expandedRows.map(row => row.key)
      // 更新展开行的key值
      this.expandRowKeys = keys
    }
  }
}
</script>

这样就可以实现在`el-table`中展开行，并在展开行中嵌套另一个`el-table`来展示子数据的效果了。