javascript - element UI树形图可以加分页嘛？

Question

下拉的数据是动态加载的，有时候数据很多，想在下拉里加分页。

Answer 1

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="Date" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="address" label="Address" />
    </el-table>

    <el-pagination
      v-if="showPagination"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="totalItems"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        
      ],
      showPagination: false,
      currentPage: 1,
      pageSize: 5,
      totalItems: 0,
      currentExpandedRow: null,
    };
  },
  methods: {
    async loadChildren(parentId, page) {
      // Load children data using parentId and page
      // Replace this with your actual API call
      return new Promise((resolve) => {
        setTimeout(() => {
          const data = [
            // ...your child data
          ];
          resolve({ data, total: 15 });
        }, 500);
      });
    },
    async load(row, treeNode, resolve) {
      if (treeNode.level === 0) {
        const { data, total } = await this.loadChildren(row.id, 1);
        this.totalItems = total;
        this.showPagination = true;
        this.currentExpandedRow = row;
        resolve(data);
      }
    },
    async handleCurrentChange(newPage) {
      if (this.currentExpandedRow) {
        const { data } = await this.loadChildren(this.currentExpandedRow.id, newPage);
        this.$set(this.currentExpandedRow, "children", data);
      }
    },
  },
};
</script>

Answer 2

在el-table中设置expand-row-keys属性为一个数组，数组中存放的是需要展开的行的key值。

<el-table :data="tableData" :expand-row-keys="expandKeys">
</el-table>

在分页组件中设置total属性为展开的行数，pageSize属性为每页展示的行数。

<el-pagination :total="expandKeys.length" :page-size="pageSize" />

在Vue实例中定义expandKeys和pageSize变量，并在methods中定义handleSizeChange和handleCurrentChange方法来处理分页变化。

data() {
  return {
    expandKeys: [], // 展开的行的key值
    pageSize: 10 // 每页展示的行数
  }
},
methods: {
  handleSizeChange(val) {
    this.pageSize = val;
  },
  handleCurrentChange(val) {
    // 计算当前页需要展开的行的key值
    const start = (val - 1) * this.pageSize;
    const end = start + this.pageSize;
    this.expandKeys = this.tableData.slice(start, end).map(item => item.key);
  }
}

Answer 3

可以的，和el-table的是一样的，你只要把逻辑弄好就可以了。