vue实现树形下拉框 可多选 封装组件及应用
效果图：
封装组件：TreeSelect.vue
调用：
import TreeSelect from "./TreeSelect";//改为自己的路径
export default {
components: { TreeSelect },
data () {
return {
//下拉树
isShowSelect: false,//选择面板，默认隐藏
officeTreeList: [],//树形结构数据
selectedOfficeIds: '',//选择后返回的选中id，以逗号拼接
selectedOffices: [],//选择后返回的选中对象，
clearTreeSelect: 0,
defaultProps: {
children: "children",//树形结构数据中对应的属性名称，可改为自己数据中属性
label: "label"//树形结构数据中对应的属性名称，可改为自己数据中属性
},
nodeKey: "id",//树形结构数据中对应的属性名称，可改为自己数据中属性
defaultCheckedKeys: [],//默认初次选中的数据
}
}页面：
methods：
popoverHide (checkedIds, checkedData) {
this.selectedOfficeIds = checkedIds;
//this.selectedOffices = checkedData;//此数据没大用，可注释
//if (checkedData != undefined && checkedData != null) {
//checkedData.forEach(item => {
//if (item.children == undefined || item.children == null) {
//this.selectedOffices.push(item.id);
//}
//});
//}
},在父组件的最外层div上加个@click="divClick”事件，控制选择面板的显隐：
divClick () {
this.$nextTick(() => {
this.$refs.treeSelect.changeIsShowSelect();
})
},附加说明：
//数据加载完成后，（以下是树形结构）
this.officeTreeList=[
{
"id": "0",
"label": "作品分类",
"icon": "offices",
"url": null,
"state": "open",
"children": [
{
"id": "o58",
"label": "金庸作品集",
"icon": "fold",
"url": null,
"state": "open",
"children": [
{
"id": "o62",
"label": "武侠类",
"icon": "fold",
"url": null,
"state": "open",
"children": [
{
"id": "o103",
"label": "天龙八部",
"icon": "office",
"url": null,
"state": "open",
"children": [],
"levelId": 0,
"parentId": "o62",
"role": null,
"selectNode": null,
"params": null,
"disabled": false,
"message": null,
"remarkMap": null
},
{
"id": "o104",
"label": "射雕英雄传",
"icon": "office",
"url": null,
"state": "open",
"children": [],
"levelId": 0,
"parentId": "o62",
"role": null,
"selectNode": null,
"params": null,
"disabled": false,
"message": null,
"remarkMap": null
}
],
"levelId": 0,
"parentId": "o58",
"role": null,
"selectNode": null,
"params": null,
"disabled": false,
"message": null,
"remarkMap": null
}
],
"levelId": 0,
"parentId": "0",
"role": null,
"selectNode": null,
"params": null,
"disabled": false,
"message": null,
"remarkMap": null
},
{
"id": "o110",
"label": "古龙作品集",
"icon": "fold",
"url": null,
"state": "open",
"children": [
{
"id": "o59",
"label": "绝代双骄",
"icon": "office",
"url": null,
"state": "open",
"children": [],
"levelId": 0,
"parentId": "o110",
"role": null,
"selectNode": null,
"params": null,
"disabled": false,
"message": null,
"remarkMap": null
},
{
"id": "o60",
"label": "楚留香传奇",
"icon": "office",
"url": null,
"state": "open",
"children": [],
"levelId": 0,
"parentId": "o110",
"role": null,
"selectNode": null,
"params": null,
"disabled": false,
"message": null,
"remarkMap": null
}
],
"levelId": 0,
"parentId": "0",
"role": null,
"selectNode": null,
"params": null,
"disabled": false,
"message": null,
"remarkMap": null
},
{
"id": "o107",
"label": "琼瑶作品集",
"icon": "office",
"url": null,
"state": "open",
"children": [],
"levelId": 0,
"parentId": "0",
"role": null,
"selectNode": null,
"params": null,
"disabled": false,
"message": null,
"remarkMap": null
}
],
"levelId": 0,
"parentId": null,
"role": null,
"selectNode": null,
"params": null,
"disabled": false,
"message": null,
"remarkMap": null
}
];
this.defaultCheckedKeys.push('o60');//默认选中楚留香传奇
this.$nextTick(() => {
this.$refs.treeSelect.loadCheckedKeys();
})
this.selectedOfficeIds = ['o60'];//第一次手动放进去，以后就直接用这个变量即可
感谢文章：https://blog.csdn.net/qq_32786139/article/details/108345247