官网的案例,直接从数据生产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>

效果:

 

Logo

前往低代码交流专区

更多推荐