2023年6月20日发(作者：)

踩坑记13css⼦元素充满⽗元素el-tree折叠与展开、⾼度、滚动条2021.8.10坑42（css、⼦元素充满⽗元素）：⽬标是通过css使html⼦元素充满⽗元素。其中，height: 100%需要⽗元素有⾼度设置才起效。如下设置即可：.box { width: 100%; height: 100%;}坑43（el-tree、⾼度充满⽗元素）：⽬标是使el-tree元素的⾼度充满⽗元素。普通使⽤，单个el-tree组件：⾸先尝试设置height: 100%，⽆效果，el-tree的⾼度依然为内容⾼度。之后外包⼀层div设置其⾼度，经过观察设置的背景⾊发现，外包div可以充满⾼度，但不会改变el-tree的颜⾊。于是，对el-tree和div做相同的设置，如下：进阶使⽤，多层包裹：见同篇，坑45（el-tree、⾼度、css、多层包裹）。坑44（el-tree、折叠与展开）：⽬标是⼀个可控制完全折叠/展开状态的el-tree组件。el-tree组件控制展开与否的⽅式是控制节点的expanded属性，true展开，false折叠。在⾮事件⽅法中访问组件的⽅式是使⽤ref获取组件，之后通过ap可以访问所有节点，只要遍历nodesMap中节点expanded属性即可控制el-tree的折叠与展开。⼀开始想直接遍历更改nodesMap中节点的值，但nodesMap没有length属性（后来想到⽅法了，直接for in即可，详见后⽂）。于是有了以下两种⽅法。⾸先放⼀下共同代码template部分、treeData等。其中还包括了使⽤component组件动态加载箭头图标的功能。如下：⽅法⼀（展开data，通过$treeNodeId获取节点，较费劲，不推荐）：参考的是此篇 ，它是通过el-tree绑定的data中的数据项的id（同时设置了el-tree属性node-key='id'）来进⾏遍历的，但这只遍历了最外层数据，没有遍历到⼦数据项，在data为多层情况下⽆法控制⼦节点。于是设置了⼀个展平函数flat()，针对当前data的结构进⾏展平。另外，在未配置id属性的情况下，使⽤$treeNodeId（会⾃动⽣成到treeData）来获取唯⼀标识。相关代码如下：function flat(obj,arr=[]){ //配合data结构的展平 (data=>{ (data) if(enTree){ //配合data的结构，与defaultProps中的设置相同 flat(enTree,arr) } }) return arr}const changeExpandStatus=()=>{ let flatTreeData=flat()//展平treeData数据 let nextExpandStatus=!AllNode for(let i=0;i<;i++){//遍历展平的数据flatTreeData //通过树的$treeNodeId属性，读取nodesMap中对应的节点进⾏操作 ap[flatTreeData[i].$treeNodeId].expanded=nextExpandStatus } AllNode=nextExpandStatus Arrow=nextExpandStatus?'arrow-up':'arrow-down'}⽅法⼆（for in获取节点，推荐）：不⽤展开treeData，也不⽤读取$treeNodeId，直接for in遍历nodesMap获取节点。const changeExpandStatus=()=>{ let nextExpandStatus=!AllNode for(let nodeIndex in ap){//for in遍历nodesMap //读取nodesMap中对应的节点进⾏操作 ap[nodeIndex].expanded=nextExpandStatus } AllNode=nextExpandStatus Arrow=nextExpandStatus?'arrow-up':'arrow-down'}坑45（el-tree、⾼度、css、多层包裹）：前传是同篇的坑43（el-tree、⾼度充满⽗元素），当时只是简单的使⽤el-tree组件。现当坑44（el-tree、折叠与展开）为el-tree上⽅加上相应标题与控制按钮后，其样式也发⽣了改变。页⾯结构见下⽅代码（为清晰起见，⼀些与当前情况⽆关的代码去掉了），为⽅便查看元素⼤致⼤⼩，设置了颜⾊区分。另外在调⽤该组件的外部是有⾼度设置的，此处略。问题：当el-tree中元素多到超出范围时，可以发现el-tree⾼度为pageBox的⾼度，即treeBox会⽐pageBox多出⼀节treeTitle的⾼度。按当前设置el-tree其⾼度固定，但超出依然显⽰，另外滚动条会始终显⽰。解决⽅法：在el-tree外包⼀层el-container组件即可。此时el-tree⾼度会随其内容动态变化。当其和treeTitle的⾼度加起来超过treeBox时，才会显⽰滚动条。代码如下。by 莫得感情踩坑机(限定)

2023年6月20日发(作者：)

踩坑记13css⼦元素充满⽗元素el-tree折叠与展开、⾼度、滚动条2021.8.10坑42（css、⼦元素充满⽗元素）：⽬标是通过css使html⼦元素充满⽗元素。其中，height: 100%需要⽗元素有⾼度设置才起效。如下设置即可：.box { width: 100%; height: 100%;}坑43（el-tree、⾼度充满⽗元素）：⽬标是使el-tree元素的⾼度充满⽗元素。普通使⽤，单个el-tree组件：⾸先尝试设置height: 100%，⽆效果，el-tree的⾼度依然为内容⾼度。之后外包⼀层div设置其⾼度，经过观察设置的背景⾊发现，外包div可以充满⾼度，但不会改变el-tree的颜⾊。于是，对el-tree和div做相同的设置，如下：进阶使⽤，多层包裹：见同篇，坑45（el-tree、⾼度、css、多层包裹）。坑44（el-tree、折叠与展开）：⽬标是⼀个可控制完全折叠/展开状态的el-tree组件。el-tree组件控制展开与否的⽅式是控制节点的expanded属性，true展开，false折叠。在⾮事件⽅法中访问组件的⽅式是使⽤ref获取组件，之后通过ap可以访问所有节点，只要遍历nodesMap中节点expanded属性即可控制el-tree的折叠与展开。⼀开始想直接遍历更改nodesMap中节点的值，但nodesMap没有length属性（后来想到⽅法了，直接for in即可，详见后⽂）。于是有了以下两种⽅法。⾸先放⼀下共同代码template部分、treeData等。其中还包括了使⽤component组件动态加载箭头图标的功能。如下：⽅法⼀（展开data，通过$treeNodeId获取节点，较费劲，不推荐）：参考的是此篇 ，它是通过el-tree绑定的data中的数据项的id（同时设置了el-tree属性node-key='id'）来进⾏遍历的，但这只遍历了最外层数据，没有遍历到⼦数据项，在data为多层情况下⽆法控制⼦节点。于是设置了⼀个展平函数flat()，针对当前data的结构进⾏展平。另外，在未配置id属性的情况下，使⽤$treeNodeId（会⾃动⽣成到treeData）来获取唯⼀标识。相关代码如下：function flat(obj,arr=[]){ //配合data结构的展平 (data=>{ (data) if(enTree){ //配合data的结构，与defaultProps中的设置相同 flat(enTree,arr) } }) return arr}const changeExpandStatus=()=>{ let flatTreeData=flat()//展平treeData数据 let nextExpandStatus=!AllNode for(let i=0;i<;i++){//遍历展平的数据flatTreeData //通过树的$treeNodeId属性，读取nodesMap中对应的节点进⾏操作 ap[flatTreeData[i].$treeNodeId].expanded=nextExpandStatus } AllNode=nextExpandStatus Arrow=nextExpandStatus?'arrow-up':'arrow-down'}⽅法⼆（for in获取节点，推荐）：不⽤展开treeData，也不⽤读取$treeNodeId，直接for in遍历nodesMap获取节点。const changeExpandStatus=()=>{ let nextExpandStatus=!AllNode for(let nodeIndex in ap){//for in遍历nodesMap //读取nodesMap中对应的节点进⾏操作 ap[nodeIndex].expanded=nextExpandStatus } AllNode=nextExpandStatus Arrow=nextExpandStatus?'arrow-up':'arrow-down'}坑45（el-tree、⾼度、css、多层包裹）：前传是同篇的坑43（el-tree、⾼度充满⽗元素），当时只是简单的使⽤el-tree组件。现当坑44（el-tree、折叠与展开）为el-tree上⽅加上相应标题与控制按钮后，其样式也发⽣了改变。页⾯结构见下⽅代码（为清晰起见，⼀些与当前情况⽆关的代码去掉了），为⽅便查看元素⼤致⼤⼩，设置了颜⾊区分。另外在调⽤该组件的外部是有⾼度设置的，此处略。问题：当el-tree中元素多到超出范围时，可以发现el-tree⾼度为pageBox的⾼度，即treeBox会⽐pageBox多出⼀节treeTitle的⾼度。按当前设置el-tree其⾼度固定，但超出依然显⽰，另外滚动条会始终显⽰。解决⽅法：在el-tree外包⼀层el-container组件即可。此时el-tree⾼度会随其内容动态变化。当其和treeTitle的⾼度加起来超过treeBox时，才会显⽰滚动条。代码如下。by 莫得感情踩坑机(限定)