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" > <spanclass="custom-tree-node"slot-scope="{node,data}"> <spanid="nodeLabel">{{node.label}}</span> <spanv-show="data.Id&&data.type==='group'"class="showGroupId">{{ data.Id }}</span> <spanv-if="data.icon"title="統計組"> <iclass="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 */
}