ant design vue:tree select根据层级设置不可选

官网的案例,直接从数据生产tree,这种方法固然简单,但是我这个需求要根据tree的层级来设置是否可选,所以需要进一步设置每一个层次的node。

<a-tree-select
    v-model="value"
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="treeData"
    placeholder="Please select"
    tree-default-expand-all
  >

改造:

我的tree层级固定,只有3个,所以写3个node即可,如果层级不固定,那这个方法就不适用了。

根据条件,设置层级是否可选。

<a-tree-select v-model="model.pid" :replaceFields="replaceFields" :filterTreeNode="filterTreeOption" show-search :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              	style="width: 100%;">
                <!-- tree的第一级,currSelected.level==2时才可以选 -->
              	<a-tree-select-node v-for="i in treeData" :value="i.id" :title="i.name" :key="i.id"
              		:disabled="currSelected.level==2?false:true" :filterTreeNode="filterTreeOption">
                  <!-- tree的第二级 ,currSelected.level==3时才可以选-->
              		<a-tree-select-node v-for="item in i.children" :value="item.id" :title="item.name" :key="item.id"
              			:disabled="currSelected.level==3?false:true">
                    <!-- tree的第三级,一直不可选 -->
              			<a-tree-select-node v-for="test in item.children" :value="test.id" :title="test.name"
              				:key="test.id" :disabled="true">
              			</a-tree-select-node>
              		</a-tree-select-node>
              	</a-tree-select-node>
              </a-tree-select>

效果:

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值