使用el-tree-select实现懒加载

使用el-tree-select实现懒加载

1.需求

项目中需要实现行政区划的查询，但是由于行政区划的数据量比较大，达到了几十M，因此需要采用懒加载的方式提高用户体验。后端给出的接口是逐级查询。

2.效果

3.代码实现

界面实现：

<el-tree-select
  v-model="listQuery.addvcd"
  lazy
  :load="load"
  :props="props"
  node-key="code"
  style="width: 240px"
  @change="fetchData"
/>


listQuery: {
  addvcd: [], // 多级行政区划的编码list，如
},

props: {
  value: 'code', // 行政区划编码，树节点的值
  label: 'name',  // 行政区名称，树节点label 
  children: 'children',  //行政区划的子节点
},

const load = async (node, resolve) => {
  console.log(node)
  // 判断节点是否为初始节点
  if (node.level === 0) {
    const { data } = await getAddCd(0)
    resolve(data.children)
  } else {
  	// 参数为当前结点的code，查询结果为当前节点的子节点
    const { data } = await getAddCd(node.data.code)
    resolve(data.children)
  }
}