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

最新推荐文章于 2025-10-28 10:40:46 发布

原创最新推荐文章于 2025-10-28 10:40:46 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

vue.js 专栏收录该内容

4 篇文章

订阅专栏

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

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"))
},