踩坑记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做相同的设置，如下：
<template>
<div class='treeBox'>
<el-tree
:data='data'
:props='defaultProps'
@node-click='handleNodeClick'
class='tree' ></el-tree>
</div>
</template>
<style>
.
tree {
background-color: lightgray;
width: 200px;
height: 100%;
}
.treeBox{
background-color: lightgray;
width: 200px;
height: 100%;
}
</style>
进阶使⽤，多层包裹：见同篇，坑45（el-tree、⾼度、css、多层包裹）。
坑44（el-tree、折叠与展开）：⽬标是⼀个可控制完全折叠/展开状态的el-tree组件。
el-tree组件控制展开与否的⽅式是控制节点的expanded属性，true展开，false折叠。在⾮事件⽅法中访问组件的⽅式是使⽤ref获取组件，之后通过treeRef.desMap可以访问所有节点，只要遍历nodesMap中节点expanded属性即可控制el-tree的折叠与展开。
⼀开始想直接遍历更改nodesMap中节点的值，但nodesMap没有length属性（后来想到⽅法了，直接for in即可，详见后⽂）。于是有了以下两种⽅法。
⾸先放⼀下共同代码template部分、treeData等。其中还包括了使⽤component组件动态加载箭头图标的功能。如下：
<template>
<div class='treeTitle'>
选择
<el-icon :size='16' @click="changeExpandStatus">
<component :is='expandArrow' />
</el-icon>
</div>
<el-tree
:data='treeData'
empty-text='当前暂⽆可选'
:highlight-current='true'
:default-expand-all='expandAllNode'
:expand-on-click-node='false'
:props='defaultProps'
@node-click='handleNodeClick'
ref='treeRef' >
</el-tree>
</template>
<script>
import { reactive,ref,toRefs } from 'vue'
export default {
setup() {
const state=reactive({
expandAllNode:true, //是否全部展开，默认值同时传递给el-tree组件的default-expand-all（只能控制初始展开情况），进⾏初始化            expandArrow:'arrow-up' //展开箭头图标
})
const treeRef=ref(null)
const treeData=ref([
{
label:'⼀',
childrenTree:[
{
label:'1-1'
}
]
]
},{
label:'⼆',
childrenTree:[
{
label:'2-1',
childrenTree:[
{
label:'2-1-1',
childrenTree:[
{ label:'2-1-1-1' },
{ label:'2-1-1-2' }
]
}
]
},
{
label:'2-2'
}
]
css设置表格滚动条
},
])
const defaultProps={
children:'childrenTree',//作为⼦树的对象属性
label:'label'
}
const handleNodeClick=(data,node,com)=>{
//点击节点，业务代码
console.log(data,node,com)
}
const changeExpandStatus=()=>{
//详见下⽅⽅法⼀、⼆
//这⾥放的是基本数据变化，仅改变箭头图标，⽆实际折叠/展开效果
let nextExpandStatus=!pandAllNode
}
return {
...toRefs(state),
treeRef,
treenData,
defaultProps,
handleNodeClick,
changeExpandStatus
}
},
}
</script>
⽅法⼀（展开data，通过$treeNodeId获取节点，较费劲，不推荐）：参考的是此篇  ，它是通过el-tree绑定的data中的数据项的id（同时设置了el-tree属性node-key='id'）来进⾏遍历的，但这只遍历了最外层数据，没有遍历到⼦数据项，在data为多层情况下⽆法控制⼦节点。
于是设置了⼀个展平函数flat()，针对当前data的结构进⾏展平。另外，在未配置id属性的情况下，使⽤$treeNodeId（会⾃动⽣成到treeData）来获取唯⼀标识。相关代码如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。