您的当前位置:首页正文

Element ui tree(树)实现父节点选中时子节点不选中,父节点取消时子节点自动取消

2024-11-30 来源:个人技术集锦

Elementui因为vue在国内的影响而受益 使用量巨大
树作为一种重要的开发组件应用广泛,今天带大家了解树的灵活应用
首先我们来创建一个树

   <el-tree
       :data="data"
        ref="tree"
        show-checkbox
        :check-on-click-node = "true"
        node-key="perId"
        :default-expanded-keys="[]"
        :default-checked-keys="[]"
        :indent = "10">
    </el-tree>

checkChange(a,b,c){
//如果为取消
  if(b === false){
         //如果当前节点有子集
         if(a.children){
         //循环子集将他们的选中取消
           a.children.map(item => {
             this.$refs.tree.setChecked(item.perId,false);
           })
         }
       }else{
       //否则(为选中状态)
           //判断父节点id是否为空
           if(a.perParentId !== 0){
           //如果不为空则将其选中
             this.$refs.tree.setChecked(a.perParentId,true);
           }
       }
       this.tableData = this.$refs.tree.getCheckedNodes();
   },

setChecked方法官方文档有详细介绍

显示全文