iview下拉树

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(){
    }
}

Cascader 级联选择

效果图