element tree树形结构默认展开全部

背景：

el-tree树形结构，默认展开全部，使用属性default-expand-all【是否默认展开所有节点】；默认展开一级，设置default-expanded-keys【默认展开的节点的 key 的数组】属性值为数组。

因为我这里的数据第一级是四川【省下面的所有市级】，所以只需要把四川的node-key="pid"的值找出，即四川为 51，赋值给default-expanded-keys，那么default-expanded-keys=[51]就实现的下面右图的效果。

效果展示：

左图：默认展开全部，右图：展开一级

核心代码：

//:default-expand-all = "true"默认展开全部
//:default-expanded-keys="[51]"默认展开四川<el-treestyle="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"

配置选项

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 的数组

 示例数据：

接口数据结构，一维数组：

//示例数据结构，对象数组，一维数组[{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是经过处理之后的值，例如以下：

[{"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}]}]}]}]}
]

多维数组，绑定给树结构。。。 

封装方法：

对接口的数据进行处理，把平面数组转树形结构：

/*** 平面数组转树形结构* @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
}