vue treeselect树形选择器使用（select下拉框中显示树形列表）

本文链接：https://blog.youkuaiyun.com/ka_xingl/article/details/118483884

本文介绍如何在Vue应用中使用@riophae/vue-treeselect组件，重点讲解了如何处理后端返回的非规范数据结构，通过normalizer函数进行规范化，并展示了模板和关键代码片段。

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

在这里插入图片描述

官方文档

npm配置

npm install --save @riophae/vue-treeselect

具体使用

需要注意的地方是normailzer规范化，后端返回的数据结构未知，但是树形选择器需要结构为id,label,children三个属性,因此需要出来规范。

<template>
	<div class="content-part">
		<el-form ref="form" :model="formData">
			<el-form-item label="资产目录">
				<treeselect v-model="formData.id"
						  :options="assetOptions"
						  :normalizer="normalizer"
						  :show-count="true"
						  placeholder="资产目录"/>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
    //引用
	import Treeselect from "@riophae/vue-treeselect"
	import "@riophae/vue-treeselect/dist/vue-treeselect.css"
	export default {
		data() {
			return {
				formData:{
					id:undefined
				},
				// 资产目录树选项
				assetOptions: [],
			}
		},
		created() {
			this.getTreeselect()
		},
		methods: {
			/** 查询菜单下拉树结构 */
			getTreeselect() {
			  getTreeWeb().then(response => {
			  	this.assetOptions = response.data.data
			  });
			},
			/** 转换菜单数据结构 */
			normalizer(node) {
			  if (node.children && !node.children.length) {
			    delete node.children;
			  }
			  return {
			    id: node.id,
			    label: node.name,
			    children: node.children
			  };
			},
		
		}
	}
</script>