element ui el-tree 实现选中父级子级取消选中

939 阅读1分钟
//首先准备递归函数添加disabled属性 如果后端返回有此参数 这个可以省掉
// 递归添加属性
function bindkey(element,bool=false,parent) {
  element.forEach((el) => {
    el.disabled = bool
    el.parent = parent
    if (el.children) {
      bindkey(el.children,bool,el);
    }
  });
}
//orgList 为数据源
// 获取去向树
const getOrgTree = () => {
  queryTree('3').then((res) => {
    bindkey(res.data)
    orgList.value = res.data;
  });
};
// 定义取消子级选中函数
function uncheck(element) {
  element.forEach((el) => {
    proxy.$refs['orgRef'].setChecked(el,false)
    if (el.children) {
      uncheck(el.children);
    }
  });
}
//准备 绑定el-tree组件的check函数 orgCode为key 这里要改成你自己的 
<el-tree :data="orgList" :props="orgTreeProp" show-checkbox check-strictly @check="check" ref="orgRef" node-key="orgCode"/>


function check(data, obj){
  let checkedKeys = obj.checkedKeys
  let bool = checkedKeys.indexOf(data.orgCode) > -1
  if(data.children){
    bindkey(data.children,bool)
    uncheck(data.children)
  }
}