动态实现el-cascader组件数据回显不可编辑功能

最新推荐文章于 2024-06-20 14:07:23 发布

首席软件工程劝退师

最新推荐文章于 2024-06-20 14:07:23 发布

阅读量365

点赞数

文章标签： javascript vue.js 开发语言逻辑回归 elementui

本文链接：https://blog.csdn.net/qq_39482158/article/details/130512555

版权

字数越少功能越吊，该方法支持无限层级，后面附加效果图

// 由于我的组件支持多选，所以我的dataList数据源是个二级数组，多加了一层map
dataList.map(itemList => {
  // 声明子集数组锚点下标，首先确保组件返回的数组长度与树形数据源层级对等
  let index = 0
   // 递归方法，参数tree为树状数据源
   function recursion(tree) {
   	 // 循环树形参数
     tree.map(item => {
     	// 先判断一波是不是这个子集
       if(item.id == itemList[index]) {
       	 // disabled只需要加在子集上，所以只需要判断该层级有无children即可
         if(item.children) {
           // 有则直接锚点++，将该层级作为参数递归
           index++
           recursion(item.children)
         } else {
           // 无children则为最底层，直接追加disabled完事
           Object.assign(item, { disabled: true })
         }
       }
     })
   }
   // 执行递归，抛入树形数据源，不写不执行递归！！！
   recursion(treeList)
 })