avue中的tree设置节点不可选中

最近在使用avue-tree的时候 由于需求问题 最高节点不可选中 看了一下文档没有disabled这个属性 百度了一下也没有得到解决 就自己写了一个

下面是html代码

  <span class="el-tree-node__label" slot-scope="{ node, data }">
            <span>
              <i class="assets-ico" 
:style="{border:data.grade == 1?'1px solid #ccc':'1px solid #FE9000'}">
<span class="assets-span" 
:style="{color:data.grade == 1?'#ccc':'#FE9000'}">
{{data.grade == 1?'集':data.grade == 2?'园':data.grade == 3?'产':data.grade == 4 || data.grade == 5?'线':'段'}}</span></i>
              <span :style="{color:!data.isSelected?'#ccc':''}"> {{ node.label }}</span>
            </span>
          </span>

然后我们需要在data中定义一个默认选中的Id  就称为id

在初始化树的时候把第一个默认选中的id赋值

this.id= this.treeData[0].children[0].id;

我这里默认选中第一个父级的第一个后代

然后在点击事件中设置选中不可选的时候默认选中上一个

 nodeByPositionClick(data, node) {
         if(data.grade == 1){
        this.$message.error("无法选择集团!");
        this.$nextTick(() => {
          this.$refs.normalTree.setCurrentKey(this.id)
        })
        return false
      }
      this.id= data.id;
      },

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值