element el-table 树形数据、懒加载添加排序功能。懒加载数据同步更新_element的table表格组件树形数据与非懒加载

element el-table 树形数据、懒加载添加排序功能

表格自带的排序功能目前只针对第一级树结构，那么当我们想对整体树形数据来排序的时候就要经过特殊处理了
第一种：不是懒加载的树形数据

    <el-table
      :data="dataListOne"
      row-key="id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      @sort-change="handleTableSort"
    >
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="name" sortable label="名称" />
    </el-table>
1
2
3
4
5
6
7
8
9
10

通过接口获取到的数据为

    dataListOne: [
        { id: 1, name: 21, address: 3 },
        { id: 2, name: 2, address: 3,
          children: [{ id: 3, name: 32, address: 3 }, { id: 4, name: 14, address: 3 }]
        },
        { id: 5, name: 1, address: 3,
          children: [{ id: 6, name: 22, address: 3 }, { id: 7, name: 12, address: 3 }]
        }
      ],
1
2
3
4
5
6
7
8
9

一定要有唯一标识，children的id不能与外层id相同。
方法：

    // 列表排序
    handleTableSort({ column, prop }) {
      this.propType = prop
      if (column.order === 'ascending') {
        this.dataListOne.sort(this.ascSortFun)
        this.dataListOne.forEach(item => { // 需要遍历每个children排序
          if (item.children && item.children.length > 0) {
            item.children.sort(this.ascSortFun)
          }
        })
      } else if (column.order === 'descending') {
        this.dataListOne.sort(this.desSortFun)
        this.dataListOne.forEach(item => {
          if (item.children && item.children.length > 0) {
            item.children.sort(this.desSortFun)
          }
        })
      }
    },
    // 升序排列方法
    ascSortFun(a, b) {
      return a[this.propType] - b[this.propType]
    },
    // 降序排列方法
    desSortFun(a, b) {
      return b[this.propType] - a[this.propType]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

第二种：懒加载的树形数据
这里的问题在于不能直接拿到children来排序, 我们需要定义map来储存懒加载的数据

    <el-table
      ref="table"
      :data="dataListTwo"
      row-key="id"
      default-expand-all
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      @sort-change="handleTableSort"
    >
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="name" sortable label="名称" />
    </el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13

在data中加入一个map来用于存取数据

data() {
    return {
      maps: new Map(),
      dataListTwo: [
        { id: 1, name: 42, address: 3, hasChildren: true },
        { id: 2, name: 12, address: 3, hasChildren: true },
        { id: 3, name: 2, address: 3, hasChildren: true }
      ]
    }
  },
1
2
3
4
5
6
7
8
9
10

方法：

   load(tree, treeNode, resolve, order) { // order 判断升序降序
      this.maps.set(tree.id, { tree, treeNode, resolve }) // 储存数据
      // 通过接口获取的list数据
      const list = [
        { id: tree.id + 18, name: 2, address: 3 },
        { id: tree.id + 12, name: 22, address: 3 }
      ]
      // 排序懒加载的数据
      if (order && order === 'ascending') {
        list.sort(this.ascSortFun)
      } else if (order && order === 'descending') {
        list.sort(this.desSortFun)
      }
      resolve(list)
    },
    handleTableSort({ column, prop }) {
      this.propType = prop
      if (column.order === 'ascending') {
        this.dataListTwo.sort(this.ascSortFun)
        this.dataListTwo.forEach(item => {
        // 重点
          this.refreshLoadTree(this.$refs.table.store.states.lazyTreeNodeMap, this.maps, item.id, column.order)
        })
      } else if (column.order === 'descending') {
        this.dataListTwo.sort(this.desSortFun)
        this.dataListTwo.forEach(item => {
          this.refreshLoadTree(this.$refs.table.store.states.lazyTreeNodeMap, this.maps, item.id, column.order)
        })
      }
    },
    // 升序排列方法
    ascSortFun(a, b) {
      return a[this.propType] - b[this.propType]
    },
    // 降序排列方法
    desSortFun(a, b) {
      return b[this.propType] - a[this.propType]
    },
    // 重点函数！！！
    // 每次点击排序都调用此函数
    // 参数分别是：组件懒加载数据的节点，data中的map，以及被操作的节点的id, 排序类型
    refreshLoadTree(lazyTreeNodeMap, maps, id, order) {
      if (maps.get(id)) {
        const { tree, treeNode, resolve } = maps.get(id)
        this.$set(lazyTreeNodeMap, id, []) // 先清空
        if (tree) { // 重新执行父节点加载子级操作
          this.load(tree, treeNode, resolve, order)
        }
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

完成，希望对大家有帮助~