vue+element的树结构根据选择的getCheckedNodes判断在第几层

我是按照label来拆分的 其他逻辑类似

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps"
   >
 </el-tree>
<el-button @click="getBtnClick">获取</el-button>
 data() {
     return {
       obj1:[],
       obj2:[],
       obj3:[],
       mark:new Set(), // 本想这用他的add,has,clear 后来麻烦改了
       value:"",
       obj1Mark:[],
       obj2Mark:[],
       obj3Mark:[],
       data: [{
         id: "一级1",
         label: '一级1',
         children: [{
           id: '二级1-1',
           label: '二级1-1',
           children: [{
             id: '三级1-1-1',
             label: '三级1-1-1'
           }, {
             id: '三级1-1-2',
             label: '三级1-1-2'
           }]
         }]
       }, {
         id:'一级2',
         label: '一级2',
         children: [{
           id:  '二级2-1',
           label: '二级2-1'
         }, {
           id: '二级2-2',
           label: '二级2-2'
         }]
       }, {
         id: '一级3',
         label: '一级3',
         children: [{
           id: '二级3-1',
           label: '二级3-1'
         }, {
           id: '二级3-2',
           label: '二级3-2'
         }]
       },{
          id: "dsda",
         label: 'dsdadsda'
       }
       ],
       defaultProps: {
         children: 'children',
         label: 'label'
       }
     }
   },
   methods:{
   	getBtnClick(){
	  let halfCheckedKeys = this.$refs.tree.getCheckedNodes();
	  // 每次点击的时候清空防止重复赋值
      this.obj1 = [] 
      this.obj3 = [] 
      this.obj2 = []
      this.checkedNodesValue(this.data,halfCheckedKeys,0)
       // 每次点击的时候去重防止重复赋值以防万一
      this.obj1 = [...new Set(this.obj1)] // 第一层
      this.obj2 = [...new Set(this.obj2)] // 第二层
      this.obj3 = [...new Set(this.obj3)] // 第三层
     },
     checkedNodesValue(data,halfCheckedKeys,level){
       if (level == 3) return;
        for(let i = 0; i < data.length; i++){
          let temp =  data[i]
          for(let a = 0 ;a < checkedNodes.length;a++){
            let check = checkedNodes[a]
            if(level == 0){
              if(temp.label == check.label){ //这是为了两个值是不是相等 没有就直接走else递归条件 获取第一层
                this.obj1.push(check.label)
              } else {
              	// 三目的作用是判断当前有没有children属性没有的话为[]防止for循环报错
                this.checkedNodesValue((temp.children ? temp.children :[]),checkedNodes,level+1)
              }
            } else if(level == 1){
              if(temp.label == check.label){
                this.obj2.push(check.label) // 获取第二层
              } else {
                this.checkedNodesValue((temp.children ? temp.children :[]),checkedNodes,level+1)
              }
            } else if (level == 2){
              if(temp.label == check.label){
                 this.obj3.push(check.label)// 获取第三层
              } else {
                this.checkedNodesValue((temp.children ? temp.children :[]),checkedNodes,level+1)
              }
            }
          }
        }
     }
   }
Logo

前往低代码交流专区

更多推荐