控件树动态获取数据

控件树动态获取数据

<el-tree
     ref="treeListData"
     :data="rightsList"
     node-key="id" 
     :props="treeProps"
     :default-checked-keys="checkArr"
     default-expand
     show-checkbox
     @check-change="propsSele">
</el-tree>

data() {
    return {
      rightsList: [], //权限列表的树形结构
      checkArr: [], //要保存的id
      treeProps: {
        children: "children",
        label: "priorityName",
      },
　　　　roleId:[]
    }
}，

created() {
    this.getMenuTree(); // 初始化
 },

methods:{
  // 控件树
    async getMenuTree() {
      try {
        const data = await getPageTree(); // 接口函数名
        console.log(data.data);
        this.rightsList = JSON.parse(JSON.stringify(data.data));
        // 获取当前角色拥有的权限列表
        this.checkArr = getTreeIds(row);  // 引入的js文件
        this.roleId = row.id;
      } catch (errror) {}
    },  
　　// 选择子级 拿到改子级的所有父id

　　　propsSele(val) {

        let arr = this.$refs.treeListData.getCheckedNodes(); //获取选中的内容

        let arr1 = this.$refs.treeListData.getHalfCheckedKeys(); // 选中的父级

        let array = arr.map((item) => item.id);

        arr1.forEach((item) => {

          let index = array.findIndex((ele) => ele === item); // 去重

          if (index === -1) {

            array.push(item);

          }

        });

        this.menuIds = array; // 传参给后台id

        // console.log(array);

    },

}

// js文件
//封装一个提取树形结构的数据id的方法
export function getTreeIds(tree) {
    //存放id的数组
    let resultArr = [];
    //存放当前要处理的权限数组
    let tempArr = [];
  
    tempArr = tempArr.concat(JSON.parse(JSON.stringify(tree)));
    console.log("tempArr:", tempArr);
  
    while (tempArr.length) {
      let node = tempArr.shift();
      if (node.children) {
        tempArr = tempArr.concat(node.children);
        delete node["children"];
      } else {
        resultArr.push(node.id);
      }
    }
  
    return resultArr;
  }