背景：
el-tree树形结构，默认展开全部，使用属性default-expand-all【是否默认展开所有节点】；默认展开一级，设置default-expanded-keys【默认展开的节点的 key 的数组】属性值为数组。
因为我这里的数据第一级是四川【省下面的所有市级】，所以只需要把四川的node-key="pid"的值找出，即四川为 51，赋值给default-expanded-keys，那么default-expanded-keys=[51]就实现的下面右图的效果。
效果展示：
左图：默认展开全部，右图：展开一级
核心代码：
javascript
//:default-expand-all = "true"默认展开全部
//:default-expanded-keys="[51]"默认展开四川
<el-tree
style="max-width: 600px"
:data="state.ferryPortList"
:props="state.defaultProps"
@node-click="handleNodeClick"
node-key="pid"
:default-expand-all = "true"
/>官网链接：点击跳转
写到这儿变完成了。。。以下是el-tree组件的一些属性说明：
一、el-tree组件的属性
el-tree的属性及其含义：
:data="state.ferryPortList"
展示数据
:props="state.defaultProps"配置选项
javascript
defaultProps: {
label: "name",
value: "pid",
},node-key="pid"
设置node-key属性，每个树节点用来作为唯一标识的属性，整棵树应该是唯一的。
例如：node-key="id" 或 node-key="pid"
:default-expand-all = "true"是否默认展开所有节点
:default-expanded-keys="state.expandedKeys"默认展开的节点的 key 的数组
示例数据：
接口数据结构，一维数组：
javascript
//示例数据结构，对象数组，一维数组
[
{
pid: 0,
parentId: -1,
name: "全部",
type: -1,
count: null,
visible: null,
geom: null,
ferryPortAreaVos: [],
portShipVoList: null,
},
{
pid: 51,
parentId: 0,
name: "四川 (24)",
type: 0,
count: 24,
visible: null,
geom: "0101000000F7CC920035045A40BE839F3880923E40",
ferryPortAreaVos: [],
portShipVoList: null,
},
{
pid: 5113,
parentId: 51,
name: "南充 (24)",
type: 1,
count: 24,
visible: null,
geom: "01010000000DE02D90A0845A40CFF753E3A5CB3E40",
ferryPortAreaVos: [],
portShipVoList: null,
},
{
pid: 511302,
parentId: 5113,
name: "顺庆",
type: 2,
count: 0,
visible: null,
geom: "01010000000DE02D90A0845A40CFF753E3A5CB3E40",
ferryPortAreaVos: [],
portShipVoList: null,
},
{
pid: 511303,
parentId: 5113,
name: "高坪",
type: 2,
count: 0,
visible: null,
geom: "0101000000B37BF2B050875A40F4FDD478E9C63E40",
ferryPortAreaVos: [],
portShipVoList: null,
},
{
pid: 511304,
parentId: 5113,
name: "嘉陵",
type: 2,
count: 0,
visible: null,
geom: "0101000000C898BB9690835A40E17A14AE47C13E40",
ferryPortAreaVos: [],
portShipVoList: null,
},
{
pid: 511321,
parentId: 5113,
name: "南部 (17)",
type: 2,
count: 17,
visible: null,
geom: "0101000000575BB1BFEC825A40643BDF4F8D573F40",
ferryPortAreaVos: [
{
name: "仙家坟渡口",
pid: 80,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "太霞三岔河码头",
pid: 78,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "太霞乡西河码头",
pid: 76,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "富利镇宋家咀渡口（上）",
pid: 70,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "富利镇宋家咀渡口（下）",
pid: 28,
areaId: 511321,
type: 100,
ferryShipVoList: [
{
pid: 17,
cname: null,
name: "西充渡船",
mmsi: null,
carryPassengersNum: null,
status: null,
areaId: 511321,
type: 101,
speakerDto: null,
},
{
pid: 29,
cname: null,
name: "富利渡船",
mmsi: null,
carryPassengersNum: null,
status: null,
areaId: 511321,
type: 101,
speakerDto: null,
},
],
},
{
name: "李家岩渡口",
pid: 79,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "杨家洞渡口",
pid: 74,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "楠木镇泸溪场渡口（上）",
pid: 67,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "楠木镇泸溪场渡口（下）",
pid: 71,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "江石岭渡口",
pid: 85,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "河口上渡口",
pid: 83,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "观音岩渡口（上）",
pid: 69,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "观音岩渡口（下）",
pid: 66,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "金鸡河渡口",
pid: 81,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "陈家口渡口",
pid: 86,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "鲁家坝渡口",
pid: 82,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
{
name: "麻溪寺渡口",
pid: 84,
areaId: 511321,
type: 100,
ferryShipVoList: [],
},
],
portShipVoList: null,
},
{
pid: 511322,
parentId: 5113,
name: "营山",
type: 2,
count: 0,
visible: null,
geom: "01010000002A3A92CB7FA45A403333333333133F40",
ferryPortAreaVos: [],
portShipVoList: null,
},
{
pid: 511323,
parentId: 5113,
name: "蓬安 (5)",
type: 2,
count: 5,
visible: null,
geom: "010100000048E17A14AE9B5A40BEC1172653053F40",
ferryPortAreaVos: [
{
name: "八字老渡口上",
pid: 64,
areaId: 511323,
type: 100,
ferryShipVoList: [
{
pid: 51,
cname: null,
name: "川蓬安渡0012",
mmsi: null,
carryPassengersNum: null,
status: null,
areaId: 511323,
type: 101,
speakerDto: null,
},
{
pid: 52,
cname: null,
name: "川蓬安渡0011",
mmsi: null,
carryPassengersNum: null,
status: null,
areaId: 511323,
type: 101,
speakerDto: null,
},
],
},
{
name: "八字老渡口下",
pid: 63,
areaId: 511323,
type: 100,
ferryShipVoList: [
{
pid: 51,
cname: null,
name: "川蓬安渡0012",
mmsi: null,
carryPassengersNum: null,
status: null,
areaId: 511323,
type: 101,
speakerDto: null,
},
{
pid: 52,
cname: null,
name: "川蓬安渡0011",
mmsi: null,
carryPassengersNum: null,
status: null,
areaId: 511323,
type: 101,
speakerDto: null,
},
],
},
{
name: "八字老渡口下（对岸）",
pid: 68,
areaId: 511323,
type: 100,
ferryShipVoList: [
{
pid: 51,
cname: null,
name: "川蓬安渡0012",
mmsi: null,
carryPassengersNum: null,
status: null,
areaId: 511323,
type: 101,
speakerDto: null,
},
],
},
{
name: "史家坝渡口",
pid: 62,
areaId: 511323,
type: 100,
ferryShipVoList: [],
},
{
name: "金坡梁村渡口",
pid: 61,
areaId: 511323,
type: 100,
ferryShipVoList: [
{
pid: 50,
cname: null,
name: "川蓬安客0050",
mmsi: null,
carryPassengersNum: null,
status: null,
areaId: 511323,
type: 101,
speakerDto: null,
},
],
},
],
portShipVoList: null,
},
{
pid: 511324,
parentId: 5113,
name: "仪陇",
type: 2,
count: 0,
visible: null,
geom: "01010000000C022B8716995A404A0C022B87863F40",
ferryPortAreaVos: [],
portShipVoList: null,
},
{
pid: 511325,
parentId: 5113,
name: "西充",
type: 2,
count: 0,
visible: null,
geom: "01010000003108AC1C5A785A408FC2F5285CFF3E40",
ferryPortAreaVos: [],
portShipVoList: null,
},
{
pid: 511381,
parentId: 5113,
name: "阆中 (2)",
type: 2,
count: 2,
visible: null,
geom: "010100000051DA1B7C617E5A400000000000903F40",
ferryPortAreaVos: [
{
name: "犀牛渡口",
pid: 59,
areaId: 511381,
type: 100,
ferryShipVoList: [
{
pid: 49,
cname: null,
name: "川阆中渡0020",
mmsi: null,
carryPassengersNum: null,
status: null,
areaId: 511381,
type: 101,
speakerDto: null,
},
],
},
{
name: "鞍子湾渡口",
pid: 58,
areaId: 511381,
type: 100,
ferryShipVoList: [
{
pid: 49,
cname: null,
name: "川阆中渡0020",
mmsi: null,
carryPassengersNum: null,
status: null,
areaId: 511381,
type: 101,
speakerDto: null,
},
],
},
],
portShipVoList: null,
},
];数据处理后，多维数组：
树形结构绑定的:data是经过处理之后的值，例如以下：
javascript
[
{
"pid": 51,
"parentId": 0,
"name": "四川 (24)",
"type": 0,
"count": 24,
"visible": null,
"geom": "0101000000F7CC920035045A40BE839F3880923E40",
"ferryPortAreaVos": [],
"portShipVoList": null,
"children": [
{
"pid": 5113,
"parentId": 51,
"name": "南充 (24)",
"type": 1,
"count": 24,
"visible": null,
"geom": "01010000000DE02D90A0845A40CFF753E3A5CB3E40",
"ferryPortAreaVos": [],
"portShipVoList": null,
"children": [
{
"pid": 511302,
"parentId": 5113,
"name": "顺庆",
"type": 2,
"count": 0,
"visible": null,
"geom": "01010000000DE02D90A0845A40CFF753E3A5CB3E40",
"ferryPortAreaVos": [],
"portShipVoList": null,
"children": []
},
{
"pid": 511303,
"parentId": 5113,
"name": "高坪",
"type": 2,
"count": 0,
"visible": null,
"geom": "0101000000B37BF2B050875A40F4FDD478E9C63E40",
"ferryPortAreaVos": [],
"portShipVoList": null,
"children": []
},
{
"pid": 511304,
"parentId": 5113,
"name": "嘉陵",
"type": 2,
"count": 0,
"visible": null,
"geom": "0101000000C898BB9690835A40E17A14AE47C13E40",
"ferryPortAreaVos": [],
"portShipVoList": null,
"children": []
},
{
"pid": 511321,
"parentId": 5113,
"name": "南部 (17)",
"type": 2,
"count": 17,
"visible": null,
"geom": "0101000000575BB1BFEC825A40643BDF4F8D573F40",
"ferryPortAreaVos": [
{
"name": "仙家坟渡口",
"pid": 80,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "太霞三岔河码头",
"pid": 78,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "太霞乡西河码头",
"pid": 76,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "富利镇宋家咀渡口（上）",
"pid": 70,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "富利镇宋家咀渡口（下）",
"pid": 28,
"areaId": 511321,
"type": 100,
"ferryShipVoList": [
{
"pid": 17,
"cname": null,
"name": "西充渡船",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511321,
"type": 101,
"speakerDto": null
},
{
"pid": 29,
"cname": null,
"name": "富利渡船",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511321,
"type": 101,
"speakerDto": null
}
]
},
{
"name": "李家岩渡口",
"pid": 79,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "杨家洞渡口",
"pid": 74,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "楠木镇泸溪场渡口（上）",
"pid": 67,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "楠木镇泸溪场渡口（下）",
"pid": 71,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "江石岭渡口",
"pid": 85,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "河口上渡口",
"pid": 83,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "观音岩渡口（上）",
"pid": 69,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "观音岩渡口（下）",
"pid": 66,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "金鸡河渡口",
"pid": 81,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "陈家口渡口",
"pid": 86,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "鲁家坝渡口",
"pid": 82,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "麻溪寺渡口",
"pid": 84,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
}
],
"portShipVoList": null,
"children": [
{
"name": "仙家坟渡口",
"pid": 80,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "太霞三岔河码头",
"pid": 78,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "太霞乡西河码头",
"pid": 76,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "富利镇宋家咀渡口（上）",
"pid": 70,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "富利镇宋家咀渡口（下）",
"pid": 28,
"areaId": 511321,
"type": 100,
"ferryShipVoList": [
{
"pid": 17,
"cname": null,
"name": "西充渡船",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511321,
"type": 101,
"speakerDto": null
},
{
"pid": 29,
"cname": null,
"name": "富利渡船",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511321,
"type": 101,
"speakerDto": null
}
]
},
{
"name": "李家岩渡口",
"pid": 79,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "杨家洞渡口",
"pid": 74,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "楠木镇泸溪场渡口（上）",
"pid": 67,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "楠木镇泸溪场渡口（下）",
"pid": 71,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "江石岭渡口",
"pid": 85,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "河口上渡口",
"pid": 83,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "观音岩渡口（上）",
"pid": 69,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "观音岩渡口（下）",
"pid": 66,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "金鸡河渡口",
"pid": 81,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "陈家口渡口",
"pid": 86,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "鲁家坝渡口",
"pid": 82,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
},
{
"name": "麻溪寺渡口",
"pid": 84,
"areaId": 511321,
"type": 100,
"ferryShipVoList": []
}
]
},
{
"pid": 511322,
"parentId": 5113,
"name": "营山",
"type": 2,
"count": 0,
"visible": null,
"geom": "01010000002A3A92CB7FA45A403333333333133F40",
"ferryPortAreaVos": [],
"portShipVoList": null,
"children": []
},
{
"pid": 511323,
"parentId": 5113,
"name": "蓬安 (5)",
"type": 2,
"count": 5,
"visible": null,
"geom": "010100000048E17A14AE9B5A40BEC1172653053F40",
"ferryPortAreaVos": [
{
"name": "八字老渡口上",
"pid": 64,
"areaId": 511323,
"type": 100,
"ferryShipVoList": [
{
"pid": 51,
"cname": null,
"name": "川蓬安渡0012",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511323,
"type": 101,
"speakerDto": null
},
{
"pid": 52,
"cname": null,
"name": "川蓬安渡0011",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511323,
"type": 101,
"speakerDto": null
}
]
},
{
"name": "八字老渡口下",
"pid": 63,
"areaId": 511323,
"type": 100,
"ferryShipVoList": [
{
"pid": 51,
"cname": null,
"name": "川蓬安渡0012",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511323,
"type": 101,
"speakerDto": null
},
{
"pid": 52,
"cname": null,
"name": "川蓬安渡0011",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511323,
"type": 101,
"speakerDto": null
}
]
},
{
"name": "八字老渡口下（对岸）",
"pid": 68,
"areaId": 511323,
"type": 100,
"ferryShipVoList": [
{
"pid": 51,
"cname": null,
"name": "川蓬安渡0012",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511323,
"type": 101,
"speakerDto": null
}
]
},
{
"name": "史家坝渡口",
"pid": 62,
"areaId": 511323,
"type": 100,
"ferryShipVoList": []
},
{
"name": "金坡梁村渡口",
"pid": 61,
"areaId": 511323,
"type": 100,
"ferryShipVoList": [
{
"pid": 50,
"cname": null,
"name": "川蓬安客0050",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511323,
"type": 101,
"speakerDto": null
}
]
}
],
"portShipVoList": null,
"children": [
{
"name": "八字老渡口上",
"pid": 64,
"areaId": 511323,
"type": 100,
"ferryShipVoList": [
{
"pid": 51,
"cname": null,
"name": "川蓬安渡0012",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511323,
"type": 101,
"speakerDto": null
},
{
"pid": 52,
"cname": null,
"name": "川蓬安渡0011",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511323,
"type": 101,
"speakerDto": null
}
]
},
{
"name": "八字老渡口下",
"pid": 63,
"areaId": 511323,
"type": 100,
"ferryShipVoList": [
{
"pid": 51,
"cname": null,
"name": "川蓬安渡0012",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511323,
"type": 101,
"speakerDto": null
},
{
"pid": 52,
"cname": null,
"name": "川蓬安渡0011",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511323,
"type": 101,
"speakerDto": null
}
]
},
{
"name": "八字老渡口下（对岸）",
"pid": 68,
"areaId": 511323,
"type": 100,
"ferryShipVoList": [
{
"pid": 51,
"cname": null,
"name": "川蓬安渡0012",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511323,
"type": 101,
"speakerDto": null
}
]
},
{
"name": "史家坝渡口",
"pid": 62,
"areaId": 511323,
"type": 100,
"ferryShipVoList": []
},
{
"name": "金坡梁村渡口",
"pid": 61,
"areaId": 511323,
"type": 100,
"ferryShipVoList": [
{
"pid": 50,
"cname": null,
"name": "川蓬安客0050",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511323,
"type": 101,
"speakerDto": null
}
]
}
]
},
{
"pid": 511324,
"parentId": 5113,
"name": "仪陇",
"type": 2,
"count": 0,
"visible": null,
"geom": "01010000000C022B8716995A404A0C022B87863F40",
"ferryPortAreaVos": [],
"portShipVoList": null,
"children": []
},
{
"pid": 511325,
"parentId": 5113,
"name": "西充",
"type": 2,
"count": 0,
"visible": null,
"geom": "01010000003108AC1C5A785A408FC2F5285CFF3E40",
"ferryPortAreaVos": [],
"portShipVoList": null,
"children": []
},
{
"pid": 511381,
"parentId": 5113,
"name": "阆中 (2)",
"type": 2,
"count": 2,
"visible": null,
"geom": "010100000051DA1B7C617E5A400000000000903F40",
"ferryPortAreaVos": [
{
"name": "犀牛渡口",
"pid": 59,
"areaId": 511381,
"type": 100,
"ferryShipVoList": [
{
"pid": 49,
"cname": null,
"name": "川阆中渡0020",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511381,
"type": 101,
"speakerDto": null
}
]
},
{
"name": "鞍子湾渡口",
"pid": 58,
"areaId": 511381,
"type": 100,
"ferryShipVoList": [
{
"pid": 49,
"cname": null,
"name": "川阆中渡0020",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511381,
"type": 101,
"speakerDto": null
}
]
}
],
"portShipVoList": null,
"children": [
{
"name": "犀牛渡口",
"pid": 59,
"areaId": 511381,
"type": 100,
"ferryShipVoList": [
{
"pid": 49,
"cname": null,
"name": "川阆中渡0020",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511381,
"type": 101,
"speakerDto": null
}
]
},
{
"name": "鞍子湾渡口",
"pid": 58,
"areaId": 511381,
"type": 100,
"ferryShipVoList": [
{
"pid": 49,
"cname": null,
"name": "川阆中渡0020",
"mmsi": null,
"carryPassengersNum": null,
"status": null,
"areaId": 511381,
"type": 101,
"speakerDto": null
}
]
}
]
}
]
}
]
}
]多维数组，绑定给树结构。。。
封装方法：
对接口的数据进行处理，把平面数组转树形结构：
javascript
/**
* 平面数组转树形结构
* @param data 平面数组
* @param pid 树节点元素的id
* @param idKey id字段
* @param pidKey pid字段
* @param sortKey 可选，排序字段
* @returns {*[]}
*/
export function arrayToTreeRec({data, pid = 0, idKey = 'id', pidKey = 'parent_id', sortKey = ''}) {
const map = {};
let tree = [];
const d = JSON.parse(JSON.stringify(data))
for (const item of d) {
map[item[idKey]] = {...item, children: item.ferryPortAreaVos && item.ferryPortAreaVos.length ? item.ferryPortAreaVos : []};
}
for (const item of Object.values(map)) {
if (item[pidKey] === pid) {
tree.push(item);
} else {
map[item[pidKey]].children.push(item);
if (sortKey) {
map[item[pidKey]].children = map[item[pidKey]].children.sort((a, b) => a[sortKey] - b[sortKey])
}
}
}
if (sortKey) tree = tree.sort((a, b) => a[sortKey] - b[sortKey])
return tree
}