使用的是vue-treeselect
一个多选组件,具有对 Vue.js嵌套选项支持.
- 支持嵌套选项的单选和多选
- 模糊匹配
- 异步搜索
- 延迟加载(仅在需要时加载深度选项的数据)
一.安装
npm install --save @riophae/vue-treeselect
或者引入:
<script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
二.示例
代码:
<!-- Vue SFC -->
<template>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</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 {
// register the component
components: { Treeselect },
data() {
return {
// define the default value
value: null,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
}
},
}
</script>
注意:
在项目中注意几个点;
1.数据必须要要是官网给的格式,
{
id:'',
label:'',
children:[...]
}
2.children
这个属性只有由下级的情况下才有,如果没有下级,也就是children.length == 0
的情况下要把children
属性去掉
delete item.children