vue3+element plus el-table嵌套表格、展开行

在Vue 3和Element Plus中，可以使用el-table组件创建嵌套表格，并使用el-table-column的type="expand"属性来实现展开行功能。以下是一个简单的例子：

<template>
  <el-table :data="tableData" 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 type="expand">
      <template #default="{ row }">
        <!-- 嵌套的表格 -->
        <el-table :data="row.details" :show-header="false">
          <el-table-column property="detailCol1" label="细节列1"></el-table-column>
          <el-table-column property="detailCol2" label="细节列2"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  {
    date: '2016-05-02',
    name: '王小虎',
    details: [
      { detailCol1: '细节1', detailCol2: '细节详情1' },
      { detailCol1: '细节2', detailCol2: '细节详情2' }
    ]
  },
  // ...可以添加更多的数据
]);
</script>

在这个例子中，el-table组件被用来展示主表格数据，其中包括展开行。展开行使用type="expand"属性定义，并通过<template #default>提供展开后要显示的内容，在这里是嵌套的el-table组件，展示细节数据。

注意，这里使用了Vue 3的<script setup>语法糖，这是Vue 3中的一个新特性，它能够让我们的组件更加简洁和直观。同时，tableData是一个响应式数据，可以包含多个对象，每个对象都可以包含展开行的数据。