像玩乐高一样玩转ElementUI：在Vue中轻松打造可折叠表格！

2023-02-26 19:58:23

实现折叠表格的终极指南：利用 Element UI 的 el-table

开启折叠行功能

踏上折叠表格之旅的第一步是为 el-table 组件启用折叠行功能。通过在 HTML 代码中为该组件添加 :row-toggle 属性并将其值设置为 true，即可开启此功能。

<el-table :row-toggle="true" :data="tableData">
  <!-- 表格内容 -->
</el-table>

定义展开/折叠事件处理方法

当折叠行展开或折叠时，el-table 会触发 expand-change 事件。为了处理此事件，在 Vue 实例中定义一个名为 expandChange 的方法。

methods: {
  expandChange(row, expanded) {
    // 当折叠行展开时，加载明细表数据
    if (expanded) {
      this.loadDetailData(row);
    }
  }
}

加载明细表数据

在 expandChange 方法中，调用 loadDetailData 方法加载明细表数据。该方法需要接受一个参数，该参数是当前展开行的记录。

loadDetailData(row) {
  // 根据主表id查询获取子表记录
  const detailData = this.$http.get(`/detail/${row.id}`);

  // 将子表list放入主表中
  this.$set(row, 'detailData', detailData);
}

实现折叠表格

现在，你可以使用 el-table 组件实现折叠表格了。在 HTML 代码中，为 el-table 组件添加 :row-toggle 属性并将其值设置为 true。并在 Vue 实例中定义一个名为 expandChange 的方法来处理 expand-change 事件。

<el-table :row-toggle="true" :data="tableData" @expand-change="expandChange">
  <!-- 表格内容 -->
</el-table>

methods: {
  expandChange(row, expanded) {
    // 当折叠行展开时，加载明细表数据
    if (expanded) {
      this.loadDetailData(row);
    }
  }

  loadDetailData(row) {
    // 根据主表id查询获取子表记录
    const detailData = this.$http.get(`/detail/${row.id}`);

    // 将子表list放入主表中
    this.$set(row, 'detailData', detailData);
  }
}