Element-ui el-tree 异步加载 懒加载 只能选择一个同级节点

需求

树的数据是通过异步(懒)加载而来,且要求同级节点只能选择一个,一个常见的应用场景是选择住址,选择了山东省不能同时选择河北省,选择了每个节点,显示完整的从根节点到本节点的路径 。

分析

Element-ui的el-tree的选中是复选框实现,可以选择多个同级节点,如果用它自带的select api(getCheckedNodesgetCheckedKeys) 比较复杂且不可靠;因而换了一种实现思路,不用 它的select api,改为自己存储当前节点,tree组件支持node-click事件,点击node时,存储当前点击的node,只存最后一次点击的node,node对象中可以拿到父node,父node可以拿到它的父node,一级一级上去就可以到根节点。

复制代码
<el-tree
	//对应后端返回数据格式中的key字段名称
          node-key="key"
          highlight-current
          :props="treeProps"
          :load="loadChildNode"
          lazy
          @node-click="handleNodeClick()"
        />


选择地址:{{ lastClickedNodePath.map(node => node.name).join("") }}



data(){
  return {
  // 搜索住址对话框
      treeProps: {
      //对应后端返回数据格式中的name字段名称
        label: 'name',
        isLeaf: 'leaf'
      },
      //被点击节点到root的完整节点路径
     lastClickedNodePath:[]
  }   
}
//加载子节点
async loadChildNode(node, resolve) {
      console.log('加载现住址子节点回调输入参数', node, resolve)
      if (node.level === 0) {
        console.log('根节点名称', this.curZone.name)
        return resolve([{ name: this.curZone.name, key: this.curZone.key }])
      }
      const code = node.data.key
      const { data } = await getChildZonesByCode(code)  //发送请求从后端获取数据,数据格式 [{name:"",key:""}]
      // 加载村级的下一级时,子节点设置为叶子节点
      if (node.level === 2) {
        data.map(ele => {
          ele.leaf = true
        })
      }
      return resolve(data)
},
//点击节点,获取完整节点路径
handleNodeClick(data,node,component){
     this.lastClickedNodePath= this.getNodePath(node, [])
}
/**
* 获取完整的节点路径
*/
getNodePath(selectNode, nodePaths) {

 if (!nodePaths) {
   nodePaths = []
 }
 if (!selectNode.data) {
   return nodePaths
 }
 //根节点代码
 const ROOT_NODE_CODE = '0'
 if (selectNode.data.value === ROOT_NODE_CODE) {
   return nodePaths
 }
 //将元素添加到头部
 nodePaths.unshift({...selectNode.data})
 if (selectNode.parent) {
   return this.getNodePath(selectNode.parent, nodePaths)
 }
 return nodePaths
},

回显/还原初始状态

上边的地址选择是在对话框中,要求每次打开选择框,只显示根节点,没找到好办法,一个偏hack的方法是,每次打开对话框,重新渲染。

复制代码
<el-tree
 v-if="digVisible"
/>
相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴9 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78910 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼10 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原11 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色11 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
阳火锅11 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
每天吃饭的羊12 小时前
react中为啥使用剪头函数
前端·javascript·react.js