vue
<treeselect
v-model="value"
:multiple="false"
:options="rootOptions"
:load-options="loadOptions"
placeholder="选择上级模型"
/>
js
必须导入
import { LOAD_CHILDREN_OPTIONS, Treeselect } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
存放值
value: null,
rootOptions: [],
方法
0是可以从后台取得
methods: {
/** 初始化下拉框数据 **/
getRootModels() {
//初始化数据 只加载根节点
locationTree('0').then(response => {
for(let index of response.data){
let modeInfo = {} ;
modeInfo.id = index.id
modeInfo.label = index.name;
modeInfo.children = null;
this.rootOptions.push(modeInfo);
}
});
},
/** 加载子节点数据 **/
loadOptions({ action, parentNode, callback }){
if (action === LOAD_CHILDREN_OPTIONS) {
//加载点击节点的 子节点
locationTree(parentNode.id).then(response => {
let arr = [];
for(let index of response.data){
let chiledModeInfo = {} ;
chiledModeInfo.id = index.id
chiledModeInfo.label = index.name;
chiledModeInfo.children = null;
arr.push(chiledModeInfo);
}
parentNode.children = arr;
});
callback();
}
},
}