Vue 试用树形下拉框

安装 vue-treeselect

npm install --save '@riophae/vue-treeselect'

• 新建组件test.vue

<template>
	<div style="width:300px;">
		<treeselect
			v-model="value"
			:options="options"
			:normalizer="normalizer"
		>
			<!-- 自定义值标签 -->
			<div slot="value-label" slot-scope="{node}">
				<span v-if="node.parentNode">{{ node.parentNode.raw.name}} -</span>
				{{ node.raw.name }}
			</div>
			<!-- 自定义选项标签 -->
			<label slot="option-label" slot-scope="{node}">
				{{node.label}}
			</label>
		</treeselect>
	</div>
</template>
<script>
 // import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
	name: 'Test',
	components: { Treeselect },
	data() {
		return {
			value: null,
			options: [
				{
					id: 1,
					name: 'a',
					subcat: [
						{
							id: 3,
							name: 'aa'
						}, {
							id: 4,
							name: 'ab'
						}
					]
				}, {
					id: 5,
					name: 'b'
				}, {
					id: 6,
					name: 'c'
				}
			]
		}
	},
	methods: {
		normalizer(node) {
			return {
				id: node.id,
				label: node.name,
				children: node.subcat
			}
		}
	}
}
</script>

标签：node,Vue,name,vue,下拉框,树形,import,treeselect,id
来源： https://blog.csdn.net/weixin_43810973/article/details/117737879