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

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

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

通过el-tree 懒加载树,创建国家地区四级树_第1张图片

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


     

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

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

通过el-tree 懒加载树,创建国家地区四级树_第2张图片

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

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

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

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

    //懒加载时查询叶子节点
            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节点调用(可以不用写,与树没有太大联系,只是我业务中会用这个方法)

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

 

你可能感兴趣的:(vue.js,elementui,javascript)