网站建设方案书例子,免费推广软件平台,莆田外贸建站,成都公司做网站背景#xff1a; el-tree树形结构#xff0c;默认展开全部#xff0c;使用属性default-expand-all【是否默认展开所有节点】#xff1b;默认展开一级#xff0c;设置default-expanded-keys【默认展开的节点的 key 的数组】属性值为数组。 因为我这里的数据第一级是四川【省…背景 el-tree树形结构默认展开全部使用属性default-expand-all【是否默认展开所有节点】默认展开一级设置default-expanded-keys【默认展开的节点的 key 的数组】属性值为数组。 因为我这里的数据第一级是四川【省下面的所有市级】所以只需要把四川的node-keypid的值找出即四川为 51赋值给default-expanded-keys那么default-expanded-keys[51]就实现的下面右图的效果。 效果展示
左图默认展开全部右图展开一级 核心代码
//:default-expand-all true默认展开全部
//:default-expanded-keys[51]默认展开四川el-treestylemax-width: 600px:datastate.ferryPortList:propsstate.defaultPropsnode-clickhandleNodeClicknode-keypid:default-expand-all true/
官网链接点击跳转 写到这儿变完成了。。。以下是el-tree组件的一些属性说明
一、el-tree组件的属性 el-tree的属性及其含义 :datastate.ferryPortList 展示数据 :propsstate.defaultProps 配置选项 defaultProps: {label: name,value: pid,}, node-keypid 设置node-key属性每个树节点用来作为唯一标识的属性整棵树应该是唯一的。 例如node-keyid 或 node-keypid :default-expand-all true 是否默认展开所有节点 :default-expanded-keysstate.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
}
