​ 最近项目上一个组件需要使用到tree组件来选择省市县乡，因为数据量比较大所以打算使用懒加载的方式来解决一次性加载太多数据而造成体验不好的问题。树组件如果数据比较多的话，一次性把整棵树的数据都请求到，略有耗时。所以为了优化性能，我们就要实现树组件懒加载的效果，也就是当我们点击树节点的时候，再去向后端发请求，获取对应点击的树节点下的数据。这样的话，点击哪里，加载哪里，性能会提高不少。

tree组件常见属性

  • data—-用来展示数据

  • props—-树状图配置

  • label—指定节点标签为节点对象的某个属性值

  • children—指定子树为节点对象的某个属性值

  • disabled—指定节点选择框是否禁用为节点对象的某个属性值

  • show-checkbox—显示选择框

  • getCheckedKeys—-获取当前选中的节点的keys

  • default-expand—–all-默认展开

  • check-strictly—-设置true，可以关闭父子关联

  • this.$refs.tree.setCheckedKeys([])—–清空当前的选择

懒加载

按照 elementui官方文档示例，效果图

duya-imagea1079094b6e58796c3ed75c4bdc29190

template部分，需要结合 lazy 和 load 一起使用

1
2
3
4
5
6
7
8
9
<el-tree
   show-checkbox
   node-key="id"
   lazy
   :load="loadNode"
   :props="defaultProps"
   v-loading="list.loading"
   ref="tree">
 </el-tree>

js 部分

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
51
52
53
54
55
56
57
58
export default {
  data () {
    return {
      list: {
        loading: false,
        isExpand: false
      },
      defaultProps: { // tree 控件的数据结构，需要设置 isLeaf
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      loading:false
    }
  },
  methods: {
    async loadNode(node, resolve) { // 懒加载
      if (node.level === 0) {
        return resolve(await this.getTagList())
      } else if (node.level === 1) {
        return resolve(await this.getTagApiList(node.label))
      } else {
        return resolve([]) // 防止该节点没有子节点时一直转圈的问题出现
      }
    },
    async getTagList () { // 获取所有接口所属模块 -> 第一层
      this.list.loading = true
      const res = await this.$API({
        name: 'getApiTagList',
        requireAuth: true
      })
      const tags = res.data.data
      tags.forEach((item, index) => { // 节点需要构建为 tree 的结构
        item.name = item.ta
        item.id = index
        item.leaf = false
      })
      this.list.loading = false
      return tags
    },
    async getTagApiList (tag) { // 查询模块下的接口列表 -> 第二层 
      const res = await this.$API({
        name: 'getTagApiList',
        data: {
          tag
        },
        requireAuth: true
      })
      const results = res.data.data
      results.forEach(item => {
        item.name
        item.id
        item.leaf = true
      })
      return results
    },
  }
}

image-20230603205603792

附上完整代码

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<template>
  <div class="app-container">
    <el-card class="left-card">
      <el-input v-model="filterText" placeholder="请输入">
        <i slot="suffix" class="el-input__icon el-icon-search icon-ss"></i>
      </el-input>
      <el-tree ref="tree" node-key="code"  :lazy="true" :data="data" :props="defaultProps" :filter-node-method="filterNode" :load="handleNodeClick"></el-tree>
    </el-card>
    <div class="right-container">
      <button>低风险区</button>
      <button class="active">中风险区</button>
      <button>高风险区</button>
      <el-card class="right-card">右边</el-card>
    </div>
  </div>
</template>
<script>
import { getprovinces, getcities, getareas, getstreets } from '@/api/riskarea'
export default {
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  data () {
    return {
      data: [{
        children: []
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      filterText: ''

    }
  },
  created () {
    this.getlpcasinfo()
  },
  methods: {
    // 获取省份
    async getlpcasinfo () {
      this.data = await getprovinces()
    },
    async handleNodeClick (data, resolve) {
      console.log(data)
      const code = data.data.code
      if (data.level === 1) {
        // 获取市
        return resolve(await getcities(code))
      } else if (data.level === 2) {
        // 获取县/区
        return resolve(await getareas(code))
      } else if (data.level === 3) {
        // 获取乡级
        return resolve(await getstreets(code))
      } else {
        // 防止该节点没有子节点时一直转圈的问题出现
        return resolve([])
      }
    },
    // 搜索
    filterNode (value, data) {
      console.log('11', value)
      console.log('22', data)
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  }
}
</script>
  • 请求接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import request from '@/utils/request'

// 获取省份
export function getprovinces () {
  return request.get('http://localhost:3001/provinces')
}

// 获取市
export function getcities (id) {
  console.log(id)
  return request.get('http://localhost:3001/cities', { params: { provinceCode: id } })
}

// 获取县/区
export function getareas (id) {
  return request.get('http://localhost:3001/areas', { params: { cityCode: id } })
}

// 获取乡级
export function getstreets (id) {
  return request.get('http://localhost:3001/streets', { params: { areaCode: id } })
}

局部刷新

想要实现的效果是，新增节点，点击确定后局部刷新，渲染新数据
效果图
duya-imagec8f6885f70513bd936da9e55286011da
关键代码

1
2
3
4
5
6
7
8
9
10
11
<el-tree
  node-key="id"
  lazy
  :load="loadNode"
  :props="defaultProps"
  :expand-on-click-node="false"
  :check-on-click-node="true"
  v-loading="list.loading"
  @node-click="nodeClick"
  ref="tree">
</el-tree>
1
2
3
4
5
6
7
8
9
10
// 点击节点，把 node 保存下来，供局部刷新中的 node 使用
nodeClick (data, node) {
  this.curPath = data.path
  this.curNode = node
},
// 实现局部刷新，在点击弹窗处调用的
partialRefreshpartialRefresh (node) {
  node.loaded = false // 设置loaded为false；模拟一次节点展开事件，加载重命名后的新数据；
  node.expand() // 新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的的展开事件，可以设置node.parent.loaded = false;node.parent.expand();
}

参考文章：https://segmentfault.com/a/1190000040763345
中华人民共和国行政区划（五级）：省级、地级、县级、乡级和村级数据。：https://github.com/modood/Administrative-divisions-of-China