vue中treeselect的基本使用
0.vue-treeselect中文网地址:https://www.vue-treeselect.cn/1.安装插件:npm install --save @riophae/vue-treeselect2.引用:importTreeselectfrom'@riophae/vue-treeselect';import'@riophae/vue-treeselect/dist/vue-treesele
0.vue-treeselect中文网地址:https://www.vue-treeselect.cn/
1.安装插件:npm install --save @riophae/vue-treeselect
2.引用:
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
3.注册:
components: {Treeselect },
4.添加:
<treeselect v-model="treevalue"
:multiple="false"
:options="treeoptions"
placeholder="选择部门..."/>
5.treeselect参数
treevalue: null,
treeoptions: [],
6.如果数据tree不是标准的id,lable结构结构则需要对内容进行转换(我使用的数据是在name,nodeid中)
/*treeSelect获取筛选条件*/
getTreeSelete() {
let me = this;
$.ajax({
url:'...........',
dataType: 'json',
type: 'post',
beforeSend: function (request) {
request.setRequestHeader("token", me.token);
},
success: function (result) {
if (result.code == 200) {
me.treeoptions = me.getTree(result.data.treeData);
}
}
});
},
/*转化tree标准格式*/
getTree(tree = []) {
let arr = [];
if (tree.length !== 0) {
tree.forEach(item => {
let obj = {};
obj.label = item.name;
obj.id = item.nodeid;
if (item.children.length > 0) {
obj.children = this.getTree(item.children);
}
arr.push(obj);
});
}
return arr
},
更多推荐
所有评论(0)