最近在做项目的过程中频繁的用到下拉选择数的效果,那就分享一下吧~
首先在vue工程中安装下拉选择树的插件
npm install --save @riophae/vue-treeselect
在安装成功之后就可以使用啦
在需要使用的文件中引入treeselect
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
一个是引用组件,一个是引用treeselect的样式
<!-- 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>
整体就是这样啦
如果在调用接口时一定要给treeselect增加一个normalizer事件,在无子结点时对children进行删除,在有子结点时对后台返回的数据进行重新赋值
具体的方法如下:
normalizer(node) {
//将里面children=[]为空的时候去掉(如果不加的这句的话 如果里面children属性值为空 数状选择器里就给他默认有下一层 可里面没有所以显示空数据)
if (node.children === null || node.children === 'null') {
delete node.children
}
// 将后台传来的数组进行修改
return {
id: node.id,
label: node.name,
children: node.children,
}
},
id 是下拉树的每一个选项的id,label是下拉树所有的文字选项,node.name的name根据后台返回的数据进行改动
下拉树默认不展开,若想展开需增加defaultExpandLevel属性为0默认不展开,为1默认展开一级结点,若想所有的结点都默认点开则设置Infinity
别的应该就没有什么啦,如果再有需要可以查看官方文档vue-treeselect