递归界面树结构 输入框搜索人员名字

1.表格里

< h6 >通讯录列表 </ h6 >
< div class= "input-wrap" >
      < el-input class= "input" v-model=" bmry" placeholder= "请输入内容" @change=" getAddressList" style= "width: 10rem; margin-left: 2rem" ></ el-input >     
</ div >

2.data里声明

data() {
         return {
           
             bmry: null,       //人员名称索引
 
        }
    },


3.方法(把user的数组放到children数组里)

   bmry(部门人员)参数在这里  引入到方法里。

//获取 分类列表(界面树结构)+(输入框)
         getAddressList() {
             let param = {
                 departid: this. bmmc,
                 name: this. bmry,
            }
             this. _GetDepartmentTreeAndUser( param). then( da => {
                 let data = JSON. parse( da);
                 if ( data. status== 0) {
                     this. keepPerson( data. result, 0); //keepPerson里是参数
                     this. form = data. result;
                }
                 console. log( 1231231231, this. form)
            });
        },

        
         //递归 循环部门人员结构(界面树结构)+(输入框)
         keepPerson( item, count){
             if( item&& item. length!= 0){
                 item. forEach( ele =>{
                     ele. level = count+ 1;
                     if( ele. CHILDREN){
                         ele. CHILDREN = ele. CHILDREN. concat( ele. USER) //把USER数组里的数据放到CHILDREN数组里
                         this. keepPerson( ele. CHILDREN, ele. level);
                    }
                })
            }
},


4.调用

mounted() {
     
         this. getAddressList();
    }


猜你喜欢

转载自blog.csdn.net/qq_39510798/article/details/80999479