vue+el-table实现展开与折叠

在Vue中使用Element UI的el-table组件实现行的展开与折叠功能，可以通过type属性和row-key属性来实现。以下是一个简单的示例：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    :expand-row-keys="expandedRows"
    @expand-change="handleExpandChange"
  >
    <el-table-column type="expand">
      <template slot-scope="props">
        <!-- 这里可以放置更多的内容，比如详细信息等 -->
        <p>{{ props.row.description }}</p>
      </template>
    </el-table-column>
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    ></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: 'Tom',
          address: 'No.189, Grove St, Los Angeles',
          description: 'This is Tom\'s description.',
        },
        // ...更多数据
      ],
      columns: [
        { label: 'Date', prop: 'date' },
        { label: 'Name', prop: 'name' },
        { label: 'Address', prop: 'address' },
      ],
      expandedRows: [], // 控制展开行的数组
    };
  },
  methods: {
    handleExpandChange(row, expandedRows) {
      // 如果已经展开，则折叠；否则展开
      if (this.expandedRows.includes(row.id)) {
        this.expandedRows = this.expandedRows.filter(id => id !== row.id);
      } else {
        this.expandedRows.push(row.id);
      }
    },
  },
};
</script>

在这个示例中，row-key属性用于指定每行的唯一键，expand-row-keys属性用于控制展开的行。el-table-column的type属性设置为"expand"来开启可展开行功能。handleExpandChange方法用于处理展开行的变化，根据当前展开的行数组expandedRows来动态更新。