全国四级行政地区树数据库sql下载路径:【免费】全国四级地区(省市县)数据表sql资源-CSDN文库https://download.csdn.net/download/weixin_51722520/88469807?spm=1001.2014.3001.5503
我在后台获取地区信息添加了限制,只获取parentid为当前的地区没所以没有显示全国数据
前端使用饿了么的组件,添加lazy做懒加载,不需要将数据递归组装成树结构返回,每次点击时,向后端发送请求,请求当前父级下的子数据 。
<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即可。
defaultProps: {label: "name",isLeaf: "isLeaf",},
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("树被点击时调用事件")},