vue+iview下拉树组件vue-treeselect的使用

最新推荐文章于 2025-06-19 09:14:13 发布

一寸灰__

最新推荐文章于 2025-06-19 09:14:13 发布

阅读量2.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/zcbmwasd/article/details/113337161

vue.js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue项目中引入和使用@riophae/vue-treeselect组件来创建下拉树。首先通过npm安装，然后导入组件及样式。在页面中，结合Form组件展示下拉树，并通过数据转换满足组件所需的id和label字段。最后提供了作者的GitHub链接以供进一步学习。

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

iview下拉树组件vue-treeselect

demo示例

下载组件

npm install --save @riophae/vue-treeselect

2.引入组件及样式

	import Treeselect from '@riophae/vue-treeselect'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'

3.页面使用

				<Col span="12">
					<FormItem label="父菜单" label-position="top" prop="parentId">
						<treeselect v-model="formData.parentId" :options="treeData" />
					</FormItem>
				</Col>

注意 Treeselect需要 id label 所以可能要处理下你的树形数据

jsonTree() {
		var that = this
		const data = that.routeData
		//  Treeselect需要 id label 后端返的是dataId 和 routeName 这里我使用了replace方法将其转为id 和 label
		let response = JSON.parse(JSON.stringify(data).replace(/dataId/g, "id"))
		this.treeData = JSON.parse(JSON.stringify(response).replace(/routeName/g, "label"))
},