526互联

vue + element ui 树形半选传父级id给后台，回显实现

发布时间 2023-10-24 16:26:11作者: 豆豆是我

1. vue2 ：

    需要关联父子级： Html部分

check-strictly="false"
<el-tree
      :data="dataTree"
      highlight-current
      show-checkbox
      :check-strictly="false"
      node-key="id"
      :props="defaultProps"
      @check-change="getCheckedKeys"
      v-model="showChecked"
      ref="tree">
    </el-tree>

   js 部分：

 //传给后台
  comfirm(){
    let parentArr = this.$refs.menuTree.getHalfCheckedKeys(); //半选的父级id 集合
    let childeArr = this.$refs.menuTree.getCheckedKeys();  // 全选的父级id ， 子级id
    let arr = childeArr.concat(parentArr); //要传给后端的数组集合

  }
 
 
showkeyEve(){
    let params = "roleId=" + this.id +"&moduleId=" +this.modId
    //获取数据
    getRoleFunAuth(params).then(data => {
         // 核心
          //更新数据时的树形显示 （去掉半选状态id避免视图半选状态id下全选）
          let arr = data; //后台返回的id组成的数组
          let newArr = [];
          arr.forEach(item=>{
              this.checked(item,this.dataTree,newArr) // 树形数组：dataTree
          })
              this.showChecked = newArr; //要显示的数组
           
    })
  },
  checked(id,data,newArr) {
    data.forEach(item => {
        if(item.id == id){
              if( item.children.length == 0 ){ //如果没有子级，直接存入
                  newArr.push(item.id)
              }
        }else{
            if( item.children.length !=0 ){  //如果有子级 递归查询子级
                this.checked(id,item.children,newArr)
              }
        }
    });
  },

 原理：

//更新数据时的树形显示 （去掉半选状态id避免视图半选状态id下全选）
// 原理：
//  递归查询，如果没有子节点，并且id能对应，直接就传入数组，
//   如果有子节点：那就只需要添加子节点的id ，父节点不用存，如果子级全部选上了，组件自动关联，父级也会选上
2. vue3 + element ui + treeSelect 下拉选择为树形
<el-tree-select
                        v-model="rulesArr"
                        ref="menuTree"
                        :check-strictly="false"
                        @check-change="getCheckedKeys"
                        placeholder="菜单权限"
                        node-key="id"
                        :highlight-current="true"
                        default-expand-all
                        :data="menuList"
                        multiple
                        collapse-tags
                        collapse-tags-tooltip
                        :props="{label:'title'}"
                        filterable
                        show-checkbox
                        :render-after-expand="false"
                        style="width:100%"
                    />

　　

     
  const menuTree = ref(null)
 const rulesArr = ref([])  //选中的项

 传给后端
function comfirm(){
　　let parentArr = menuTree.value.getHalfCheckedKeys();  //半选的父级 id集合
       let childeArr = menuTree.value.getCheckedKeys();  // 全选的父级id  ，子级id集合
       let arrSelect = childeArr.concat(parentArr);  //要传给后台的数据   
   

}
//递归函数，用于存已选中的子元素
function checked(id,data,newArr) {
    data.forEach(item => {
        if(item.id == id){
            if( item.children == null ){
                newArr.push(item.id)
            }
        }else{
            
            if(item.children!= null &&  item.children.length !=0 ){ 
                checked(id,item.children,newArr)
            }
        }
    });
    console.log('???newArr-------',newArr)
}

编辑 ： 获取当前已选项
getData(){
   adminGroupInfo({id:id}).then(res=>{
        console.log('??/获取组信息',res)
        let data = res.data
        //更新数据时的树形显示 （去掉半选状态id避免视图半选状态id下全选）
            let arr = data.rules.split(','); //后台返回的id组成的数组
            arr = arr.map(Number); //后台返回的id组成的数组
    
            let newArr = [];
            
            arr.forEach(item=>{
                checked(item,menuList.value,newArr) //menuList 树形数组
            })
            rulesArr.value =  newArr  //转为数字
    
  }）