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([]) //选中的项let parentArr = menuTree.value.getHalfCheckedKeys(); //半选的父级 id集合 let childeArr = menuTree.value.getCheckedKeys(); // 全选的父级id ,子级id集合 let arrSelect = childeArr.concat(parentArr); //要传给后台的数据
传给后端
function comfirm(){
} //递归函数,用于存已选中的子元素 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 //转为数字 })
标签:vue,回显,半选传,newArr,item,let,半选,data,id From: https://www.cnblogs.com/lxs-616/p/17785128.html