实际开发中 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 */
}