1、安装
npm install --save @riophae/vue-treeselect
然后在页面中引入
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
注册组件
components: { Treeselect }
使用
<treeselect v-model="value" :multiple="true" :options="options" />
完整代码
<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>
注意绑定的数据结构是 id, label, children
{
id: '<id>',
label: '<label>',
children: [
{
id: '<child id>',
label: '<child label>',
},
...
],
}
有时候后台传过来的数据结构的键不是 id, label, children,我们需要转换成符合要求的数据结构
// 获取信息
getAllDeps() {
this.$axios.post("url").then(res => {
if (res.data.responseCode === "200") {
let tempArr=[]
this.changeDepsDataName(res.data.data,tempArr)
console.log(tempArr)
this.options= tempArr
}
});
},
changeDepsDataName(dataArr, tepArr){
for( let i=0;i<dataArr.length;i++){
let obj={}
obj.id = dataArr[i].id
obj.label = dataArr[i].departmentName
if(dataArr[i].childDepartment && dataArr[i].childDepartment.length){
obj.children = this.changeDepsDataName(dataArr[i].childDepartment,[])
}
tepArr.push(obj)
}
return tepArr
},