element-ui树形控件怎么进行初始化？思路是啥？

实现思路：

在点击按钮的时候显示弹框，复制element-ui里面树形组件，并显示树形控件
在点击确定按钮的时候，将树形结构选中的权限赋值个某个角色，通过调用接口，因为在点击确定按钮的时候，我们需要把添加权限的id的一个容器以一个数组的形式来传递，所以我们封装了一个专门把返回的所选权限的id值以逗号的形式放到resultArr数组里面的函数
封装函数之后的返回值回到组件里面，作为一个变量来进行接受
:default-checked-keys=“checkArr”，通过这样形式的绑定，就可以再打开拥有树形控件的弹框里面进行树形初始化的一个效果

css代码块：

   <!-- 树形控件 -->
        <!-- 
            :data="data" 指定数据源
            show-checkbox 指定复选框模式
            node-key="id"  指定树形结构的id标识
            :default-expanded-keys="[1, 3]" 指定默认展开的id
            :default-checked-keys="[5]"  指定默认选中的id
            :props="defaultProps" 指定label和children的key
        -->
        <el-tree
          ref="roletree"
          :data="rightTree"
          show-checkbox
          node-key="id"
          :default-checked-keys="checkArr"
          :props="defaultProps"
          default-expand-all
        ></el-tree>

 // 点击弹框确定的代码
 //  将树形结构选中的权限赋值个某个角色
    async setRightToRole() {
      //data怎么获取：data 是全部或部分选中的id  '1,2,2,3,5,6,7,7,8'

      //则返回目前半选中的节点所组成的数组
      const arr1 = this.$refs.roletree.getHalfCheckedKeys();
      // 全部选中
      const arr2 = this.$refs.roletree.getCheckedKeys();

      //合并全部选中和部分选中的id节点
      const resultArr = [...arr1, ...arr2].join(",");

      //调分配权限给角色的方法
      // 第一个值为传递当前数据得id值，第二个值为传递选中id值得数组
      const res = await setRightToRole(this.currentRoleId, {
        rids: resultArr
      });
      console.log("调分配权限给角色的返回：", res);

      this.dialogVisibleRight = false;
      this.getRoleList();
    },
      // 打开分配权限的弹框
    async roleRightOpen(role) {
       this.currentRoleId = role.id;
      //调用指定角色信息
      // 封装一个获取Id的函数
        const checkArr = treeToList(role);
       this.checkArr = checkArr;  // 将获取到的id返回到一个数组中，并与树形组件进行关联
      const res = await getRightTree();  //获取树形控件得数据
      this.rightTree = res.result;
      this.dialogVisibleRight = true;
    },

封装得函数

export function treeToList(tree){
    let resultArr = [];
    let tepArr = [];
    //对传递过来得数组进行一个深拷贝
    tepArr = tepArr.concat(JSON.parse(JSON.stringify(tree)))  
    
    // 如果tepArr有值就一直会不断得循环
    while(tepArr.length){
        var node = tepArr.shift();  // 去除数组首部的第一个元素
        // children是内部数据自己定义得
        if(node.children){
          tepArr = tepArr.concat(node.children)
          delete node['children']
        }else{
            resultArr.push(node.id)    // 将深拷贝循环获取到的id值放到数组中
        }
    }
    return resultArr
}

问题：为啥要用while循环？

while（） { }语句，当括号内的内容为真的时候，就执行{ }中的语句。所以当while（true）出现的时候，就是表示程序一直执行{}中的语句，因为while（）中始终为“真”。

element-ui树形控件怎么进行初始化？思路是啥？

猜你喜欢