实际开发中 flex布局遇到的问题(1)
1.在tree组件的标签上增加组id和一个统计组标识
首先:用插槽将需要的组id和同组标识插入
<el-tree
class="filter-tree"
node-key="Id"
:data="menuData"
:props="defaultProps"
:filter-node-method="filterNode"
@node-click="handleNodeExpand"
:highlight-current="true"
ref="tree"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span id="nodeLabel">{{ node.label }}</span>
<span v-show="data.Id && data.type === 'group'" class="showGroupId">{{
data.Id
}}</span>
<span v-if="data.icon" title="统计组">
<i class="el-icon-star-off"></i>
</span>
</span>
</el-tree>
(2)设置css样式:
custom-tree-node {
flex: 1 ; //将元素平分
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
#nodeLabel {
flex-grow:1 //平分后发现,组id在tree节点的中间,影响体验,所以将第一个元素的空间放大一倍,和最后一个元素挨近些。
}
.showGroupId{
margin-right: 5px;
}
}
原来的样式:
修改后的样式:
技术要点:
flex-grow
属性定义项目(具体哪个元素上)的放大比例,默认为0
,即如果存在剩余空间,也不放大。
.item { flex-grow:1; /* default 0 */ }