通过el-tree 懒加载树，创建国家地区四级树

CV猿码人2023-10-28 17:37

全国四级行政地区树数据库sql下载路径：【免费】全国四级地区(省市县)数据表sql资源-CSDN文库https://download.csdn.net/download/weixin_51722520/88469807?spm=1001.2014.3001.5503

我在后台获取地区信息添加了限制，只获取parentid为当前的地区没所以没有显示全国数据

前端使用饿了么的组件，添加lazy做懒加载，不需要将数据递归组装成树结构返回，每次点击时，向后端发送请求，请求当前父级下的子数据。

html 复制代码

<el-card style="height: 95%">
     <div style="  height: 520px; display: block;overflow-y: scroll;">
      <el-tree lazy :props="defaultProps" :load="loadNode" @node-click="handleNodeClick"></el-tree>
     </div>
</el-card>

绑定数据结构，label为展示的数据，isLeaf为是否是子节点，后端传值时，将isLeaf设置为true即可。

html 复制代码

   defaultProps: {
                    label: "name",
                    isLeaf: "isLeaf",
                },

loadNode会在页面被点击时自动调用，resolve回调方法会将查询到的数据，放入到树中，不需要将数据绑定。

这里将数据做了判断，为空时给他赋值为141100000000，不为空则将node节点id给到父级id

loadNode就是树的点击事件触发的方法

loadNode回调resolve只接受List类型的数据

html 复制代码

    //懒加载时查询叶子节点
            loadNode(node, resolve) {
                let params = node.data ? ('parent.id=' + node.data.id) : ('id=141100000000')
                this.get(ctx + '/basicinfo/region/getLeftNode?' + params).then((res) => {
                    resolve(res)
                })
            },

将点击时的node节点调用（可以不用写，与树没有太大联系，只是我业务中会用这个方法）

html 复制代码

    handleNodeClick(node, e) {
                 console.log("树被点击时调用事件")
            },