安装 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>