实际开发中 flex布局遇到的问题(1)
时间:2021-08-11
本文章向大家介绍实际开发中 flex布局遇到的问题(1),主要包括实际开发中 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 */ }
原文地址:https://www.cnblogs.com/zhaohui9527/p/15128427.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法