【vue组件】使用element-ui table 实现嵌套表格 点击展开时获取数据

在Vue中使用Element UI的Table组件实现嵌套表格时，可以通过监听展开行的事件来获取数据。以下是一个简单的例子：

1. 首先确保你已经安装并引入了Element UI。
2. 在你的Vue组件中，定义嵌套表格的数据结构。
3. 使用<el-table>组件来展示外层表格，并使用<el-table-column>的type="expand"来定义一个可以展开的列。
4. 在展开列中使用<el-table>来实现嵌套的内容。
5. 监听expand-change事件来获取当展开行时的数据。

<template>
  <el-table :data="tableData" style="width: 100%" @expand-change="handleExpandChange">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table :data="props.row.innerData" style="width: 100%">
          <!-- 定义嵌套表格的列 -->
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <!-- 其他列定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          innerData: [
            { date: '2016-05-02', name: '张小刚', address: '上海市普陀区金沙江路 1518 弄' },
            // ... 更多嵌套表格数据
          ]
        },
        // ... 更多外层表格数据
      ]
    };
  },
  methods: {
    handleExpandChange(row, expandedRows) {
      if (expandedRows.length) {
        console.log('展开行的数据:', row);
        // 在这里可以执行获取数据的操作
      }
    }
  }
};
</script>

在这个例子中，handleExpandChange方法会在展开行时被调用，你可以在这个方法中执行获取数据的操作。row参数是当前展开行的数据对象，expandedRows是当前展开的所有行的数据数组。