el-input和el-tree，el-popover结合的树形结构选择框

终归墟

已于 2022-06-16 18:30:51 修改

阅读量1.9k

点赞数

分类专栏： element使用历程文章标签： vue.js 前端 elementui

于 2022-06-14 17:38:40 首次发布

本文链接：https://blog.csdn.net/s_9527_s/article/details/125282180

版权

最近需求要求选择一个树形结构的数据，本来是列表的数据，使用select就可以解决了，客户要展示结构，给到的ui如下，要求不止可以选择子级，还要可以选择父级，数据上也就是父级参数和子级一样，只不过多了子级，或者子级列表不一样。

话不多说，上代码，

html

<el-popover trigger="focus" placement="bottom-start">
	<el-input slot="reference" v-model="dataname" placeholder="请选择"></el-input>
	<div style="width: 200px;height: 200px;overflow: auto;">
		<el-tree :data="list" :props="defaultProps" accordion highlight-current 
			:expand-on-click-node='false'
			@node-click="handleNodeClick">
		</el-tree>
	</div>
</el-popover>

js --data