el-tree自定义选择----取消子级不取消父级

el-tree自定义选择

需求:

1、选择父级 自动 选择子级
2、选择子级自动选择父级
3、取消子级不取消父级

实现:


```javascript
<el-tree
    ref="permissionNode"
    :props="props"
    :data="all_permission"
    node-key="id"
    check-strictly
    @check="handleCheck"
@check-change="handleCheckChange">
</el-tree>
  data() {
        return {
          props: {
                // label: 'title',
                children: "children"
          },
          all_permission:[{
                id:1,
                label: "父级" 
                children:[{
                      label: "子级"
                      parentId: 1, 
               }]
          }]
        };
    },
methods:{
    selectChildren(data) {
        data && data.children && data.children.map(item => {
            this.$refs.permissionNode.setChecked(item.id, true);
            if (data.children) {
                this.selectChildren(item)
            }
        });
    },
    handleCheck(data, { checkedKeys }) {
        // 节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
        //如果为取消
        if (checkedKeys.includes(data.id)) {
            //如果当前节点有子集
            this.selectChildren(data);
        }

    },handleCheckChange(data, checked, indeterminate) {
    // 节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
    //如果为取消
    if (checked === false) {
        //如果当前节点有子集
        if (data.children) {
            //循环子集将他们的选中取消
            data.children.map(item => {
                this.$refs.permissionNode.setChecked(item.id, false);
            });
        }
    } else {
        //否则(为选中状态)
        //判断父节点id是否为空
        if (data.parentId !== 0) {
            //如果不为空则将其选中
            this.$refs.permissionNode.setChecked(data.parentId, true);
        }
    }

    var check = this.$refs.permissionNode.getCheckedNodes();
    console.log(data, checked, indeterminate,check);},}

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值