iview下拉树

最新推荐文章于 2025-05-04 19:04:09 发布

芭拉拉小魔仙

最新推荐文章于 2025-05-04 19:04:09 发布

阅读量983

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue2

本文链接：https://blog.youkuaiyun.com/weixin_45274678/article/details/96971150

Vue2 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种将Dropdown与Tree组件结合使用的方案，通过自定义触发方式实现下拉选择计划类型的交互效果。此方案适用于需要从层级结构中选择特定项的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Dropdown与Tree结合使用

效果图
在这里插入图片描述

//html 
 <Dropdown trigger="custom" :visible="selectTreeVisible" placement="bottom-end">
	 <Input v-model="selectedLevelName" 
	   @on-focus="freshSelectTree"
	   style="width:200px;" readonly
	   placeholder="请选择计划类型">
	   <Button v-show="!selectTreeVisible" @click="freshSelectTree" slot="append" icon="ios-arrow-up"></Button>
	   <Button v-show="selectTreeVisible" @click="selectTreeVisible=false" slot="append" icon="ios-arrow-down"></Button>
	 </Input>
	<Dropdown-menu slot="list">
		<Tree 
			:data="projectLevelList"
			@on-select-change="handleChoiceProject">
		</Tree>
	</Dropdown-menu>
</Dropdown>
//script
data(){
	selectTreeVisible:false,
}
methods:{
	//刷新树
	freshTreeList(){
      if(!this.selectTreeVisible){
        this.selectTreeVisible = true;
        this.getTreeList();
      }
    },
    //选择树出发的函数
    handleProjectLevel(){
    }
}