vue3 + element plus el-table expand 实现按钮展开行 且在展开时查询数据

在Vue 3和Element Plus中，可以通过el-table组件实现按钮控制行的展开，并在展开时查询数据。以下是一个简单的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template #default="{ row }">
        <!-- 这里是展开后要显示的数据 -->
        <p>展开行数据: {{ row.expandData }}</p>
      </template>
    </el-table-column>
    <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>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄',
    expandData: '这是额外的数据1',
  },
  // ... 更多数据
]);
</script>

在这个例子中，el-table-column 的 type="expand" 属性用于定义一个可展开的列，#default 插槽用于定义展开后显示的内容。row 参数提供了当前行的数据。

如果需要在展开行时进行异步数据加载，可以使用expand-change事件来监听行展开的变化，并在回调中进行数据查询。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @expand-change="handleExpandChange"
  >
    <!-- 省略其他代码 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
import { getAsyncData } from './api'; // 假设这是一个异步获取数据的API
 
const tableData = ref([
  // ... 数据对象
]);
 
const handleExpandChange = async (row, expanded) => {
  if (expanded) {
    // 当行展开时查询数据
    const expandData = await getAsyncData(row);
    // 假设获取到的数据需要存储在row的expandData属性中
    row.expandData = expandData;
  }
};
</script>

在这个例子中，handleExpandChange 函数会在行展开时被调用，并检查是否展开了行（expanded 为 true）。如果是，它会异步获取数据，并将结果存储在行数据的 expandData 属性中。这样，当行展开时，展开部分就会显示这些数据。