使用el-collapse-transition实现el-table树形加载动画（懒加载版）

什么是el-collapse-transition？ 🔍

el-collapse-transition是Element UI提供的一个过渡组件，用于实现元素的展开和折叠动画。它可以应用于任何需要动态显示或隐藏的元素，非常适合用于树形数据的加载动画。

实现步骤 🛠️

1. 安装Element UI

首先，确保您已经安装了Element UI。如果还没有安装，可以使用以下命令进行安装：

npm install element-ui --save

2. 引入必要的组件

在您的Vue组件中，引入el-table、el-table-column和el-collapse-transition组件：

<template>
  <div>
    <el-table :data="tableData" row-key="id" lazy :load="load">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="value" label="值"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { Table, TableColumn, CollapseTransition } from 'element-ui';

export default {
  components: {
    elTable: Table,
    elTableColumn: TableColumn,
    elCollapseTransition: CollapseTransition,
  },
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          { id: 1, name: '子节点1', value: '100' },
          { id: 2, name: '子节点2', value: '200' },
        ]);
      }, 1000);
    },
  },
  created() {
    this.tableData = [
      { id: 1, name: '父节点1', value: '1000', children: [] },
      { id: 2, name: '父节点2', value: '2000', children: [] },
    ];
  },
};
</script>

3. 使用el-collapse-transition实现动画

为了实现树形加载动画，我们需要在el-table的row槽中使用el-collapse-transition组件。以下是完整的代码示例：

<template>
  <div>
    <el-table :data="tableData" row-key="id" lazy :load="load" :expand-row-keys="expandedKeys">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="value" label="值"></el-table-column>
      <el-table-column width="150">
        <template slot-scope="scope">
          <el-collapse-transition>
            <div v-if="scope.row._expand">
              <el-table :data="scope.row.children" style="margin-left: 20px;">
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="value" label="值"></el-table-column>
              </el-table>
            </div>
          </el-collapse-transition>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { Table, TableColumn, CollapseTransition } from 'element-ui';

export default {
  components: {
    elTable: Table,
    elTableColumn: TableColumn,
    elCollapseTransition: CollapseTransition,
  },
  data() {
    return {
      tableData: [],
      expandedKeys: [],
    };
  },
  methods: {
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          { id: 1, name: '子节点1', value: '100' },
          { id: 2, name: '子节点2', value: '200' },
        ]);
      }, 1000);
    },
    handleExpandChange(row, expandedRows) {
      if (expandedRows.includes(row)) {
        this.expandedKeys.push(row.id);
      } else {
        this.expandedKeys = this.expandedKeys.filter(id => id !== row.id);
      }
    },
  },
  created() {
    this.tableData = [
      { id: 1, name: '父节点1', value: '1000', children: [] },
      { id: 2, name: '父节点2', value: '2000', children: [] },
    ];
  },
};
</script>

<style scoped>
.el-table__expanded-cell {
  padding: 0;
}
</style>

4. 解释关键代码

• row-key="id"：设置行的唯一标识符。
• lazy :load="load"：启用懒加载，并指定加载子节点的方法。
• el-collapse-transition：用于实现展开和折叠动画。
• handleExpandChange：处理行展开和折叠事件，更新expandedKeys。

常见问题及解决方案 ❗

问题1: 动画效果不明显

解决方法:

• 检查CSS：确保没有覆盖el-collapse-transition的样式。
• 示例样式：

  .el-table__expanded-cell {
    padding: 0;
  }

问题2: 子节点加载延迟

解决方法:

• 优化加载方法：确保load方法中的异步请求时间合理。
• 示例方法：

  methods: {
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          { id: 1, name: '子节点1', value: '100' },
          { id: 2, name: '子节点2', value: '200' },
        ]);
      }, 1000);
    },
  },

问题3: 展开状态丢失

解决方法:

• 管理展开状态：使用expandedKeys数组管理展开的行。
• 示例方法：

  methods: {
    handleExpandChange(row, expandedRows) {
      if (expandedRows.includes(row)) {
        this.expandedKeys.push(row.id);
      } else {
        this.expandedKeys = this.expandedKeys.filter(id => id !== row.id);
      }
    },
  },

问题4: 样式问题

解决方法:

• 自定义样式：根据需要自定义el-table和el-collapse-transition的样式。
• 示例样式：

  .el-table__expanded-cell {
    padding: 0;
  }

结语 🌟

通过本文的介绍，您应该已经了解了如何使用el-collapse-transition实现el-table的树形加载动画，并提供了懒加载版的解决方案。从安装Element UI到实现动画，再到常见问题及解决方案，每一个步骤都至关重要。希望本文能对您的开发工作有所帮助。如果您有任何疑问或遇到问题，欢迎留言交流！