perf: 滚动条调整，table右侧优化等

1.滚动条加宽、legend限制滚动条滑块最小长度
2.取消table右侧滚动条预留区域
3.调整其他因为布局改变而错乱的样式

nezha-fronted/src/assets/stylus/main.scss

@@ -389,6 +389,12 @@ li{
   height: calc(100% - 2px);
   padding-left: 20px;
   line-height: 27px;
+  display: inline-block;
+}
+.sub-list-tab-txt {
+  font-size: 14px;
+  color: #666666;
+  padding-left: 8px;
 }
 /* end--二级页面tab*/
 
@@ -487,10 +493,8 @@ li{
   display: flex;
   height: 50px;
   align-items : center;
-  /*justify-content: space-between;*/
+  position: relative;
-}
+  flex-direction: row-reverse;
-.top-tools-reverse {
-  /*flex-direction: row-reverse;*/
 }
 .top-tools>div {
   margin-top: 2px;
@@ -508,6 +512,30 @@ li{
   display: flex;
   align-content: center;
 }
+.top-tool-main-right {
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  transition: .4s right, .4s transform;
+}
+.top-tool-main-left {
+  position: absolute;
+  left: 0;
+  display: flex;
+  align-items: center;
+  transition: .4s right, .4s transform;
+}
+.top-tool-main-left>.panel-dropdown-title {
+  margin-top: -2px;
+}
+.top-tool-main-right>.nz-btn, .top-tool-main-right-to-left>.nz-btn, .top-tool-main-right>.nz-btn-group, .top-tool-main-right>.panel-calendar {
+  margin-top: -2px;
+}
+.top-tool-main-right-to-left {
+  right: 100% !important;
+  transform: translateX(100%);
+}
 /* end--顶部工具栏*/
 
 /* begin--二级顶部工具栏*/
@@ -575,6 +603,9 @@ li{
 .nz-table.el-table--border td, .el-table--border th, .nz-table .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
   border-right: none;
 }
+.nz-table .el-table__body {
+  width: 100% !important;
+}
 .chart-table .nz-table.el-table td {
   background-color: white;
 }
@@ -881,6 +912,7 @@ li{
   height: calc(100% - 132px);
   width: 100%;
 }
+
 .el-scrollbar__wrap {
   overflow-x: hidden !important;
 }
@@ -888,6 +920,15 @@ li{
   background-color: #aaa;
   cursor: default;
 }
+.el-scrollbar__bar.is-vertical {
+  width: 11px;
+}
+.app>.el-scrollbar__bar.is-vertical {
+  width: 5px;
+}
+.el-scrollbar__bar {
+  border-radius: 6px;
+}
 .el-autocomplete-suggestion__wrap.el-scrollbar__wrap, .el-cascader-menu__wrap.el-scrollbar__wrap {
   margin-bottom: 0 !important;
 }
@@ -1274,9 +1315,12 @@ li{
   background-color: rgba(255, 99, 71, .85);
 }
 
-/*滚动条相关，减小table内滚动条的空间*/
+/*滚动条相关*/
+.ps__thumb-y {
+  width: 11px;
+}
 .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
-  width: 6px;
+  width: 11px;
 }
 .ps__thumb-y {
   right: 0px;

nezha-fronted/src/components/charts/chart-table.vue

@@ -291,9 +291,6 @@ export default {
         pageSize(val) {
           this.pageObj.pageSize = val;
           this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj)
-          this.$nextTick(() => {
-            this.gutterHandler(".nz-table");
-          });
         },
         filterShowData(source,pageObj){
           return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
@@ -305,9 +302,6 @@ export default {
         screenPageSize(val) {
           this.screenPageObj.pageSize = val;
           this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj)
-          this.$nextTick(() => {
-            this.gutterHandler(".nz-table");
-          });
         },
         startLoading(area){
           if(area==='screen'){

nezha-fronted/src/components/charts/line-chart-block.scss

@@ -33,6 +33,7 @@
   text-align:left;
   margin:0 auto;
   line-height: 18px;
+  position: relative;
 }
 .legend-container-screen.legend-container {
   height: 115px;

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -64,13 +64,11 @@
 
     <div class="line-area"  ref="lineChartArea"  id="lineChartArea" v-show="firstShow"></div>
 
-    <div class="legend-container"   id="legendArea" ref="legendArea" v-show="firstShow">
+    <div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
-      <el-scrollbar style="height: 100%;">
       <div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
         <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
         <br/><!--bgColorList[index]-->
       </div>
-      </el-scrollbar>
     </div>
     <!--
     <Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
@@ -99,13 +97,11 @@
       </div>
       <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:10px;"></div>
 
-      <div class="legend-container legend-container-screen"  id="screenLegendArea" ref="screenLegendArea"  v-show="showLegend">
+      <div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend" v-scrollBar:legend>
-        <el-scrollbar style="height: 100%;" ref="screenLegendScrollbar">
         <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
           <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
           <br/><!--bgColorList[index]-->
         </div>
-        </el-scrollbar>
       </div>
 
       <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
@@ -844,11 +840,11 @@
               this.isGreyScreen.push(false);
             });
           }
-          this.$nextTick(() => {
+          /*this.$nextTick(() => {
             this.$refs.screenLegendScrollbar.update();
-            /*let divHeight = this.$refs.screenLegendArea.offsetHeight;
+            let divHeight = this.$refs.screenLegendArea.offsetHeight;
-            this.echartModalStore.resize({height: '100%'});*/
+            this.echartModalStore.resize({height: '100%'});
-          });
+          });*/
         }
       },
       handleLineFeed(str,chartWidth){

nezha-fronted/src/components/page/alert/config.vue

@@ -16,17 +16,14 @@
     </div>
     <div class="content-right">
       <div class="top-tools">
-        <div>
+        <div class="top-tool-main-right">
-
-        </div>
-        <div>
-          <button id="alert-add" @click="toAdd"  :title="$t('overall.createAlertRule')"
-                  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20">
-                      <i class="nz-icon-create-square nz-icon"></i>
-          </button>
           <div class="top-tool-search float-right">
             <search-input :searchMsg="searchMsg" @search="search"></search-input>
           </div>
+          <button id="alert-add" @click="toAdd"  :title="$t('overall.createAlertRule')"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20">
+                      <i class="nz-icon-create-square nz-icon"></i>
+          </button>
         </div>
       </div>
       <el-table
@@ -357,9 +354,6 @@
         this.pageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
-        this.$nextTick(() => {
-          this.gutterHandler(".nz-table");
-        });
       },
       search: function (searchObj) {
         this.searchLabel = {};
@@ -420,7 +414,6 @@
 
       this.getTableData();
       this.$nextTick(() => {
-        this.gutterHandler(".nz-table");
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.alertRuleTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {

nezha-fronted/src/components/page/alert/list.vue

@@ -16,11 +16,12 @@
     </div>
     <div class="content-right">
       <div class="top-tools">
-        <div></div>
+        <div class="top-tool-main-right">
-        <div class="top-tool-search float-right">
+          <div class="top-tool-search">
             <search-input :searchMsg="searchMsg" @search="search"></search-input>
           </div>
         </div>
+      </div>
       <el-table
         class="nz-table"
         :data="tableData"
@@ -298,9 +299,6 @@
         this.pageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getAlertList();
-        this.$nextTick(() => {
-          this.gutterHandler(".nz-table");
-        });
       },
       search: function (searchObj) {
         this.searchLabel = {};
@@ -380,9 +378,6 @@
             }
           });
         }
-        this.$nextTick(() => {
-          this.gutterHandler(".nz-table");
-        });
       });
       this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))

nezha-fronted/src/components/page/asset/asset.vue

@@ -33,8 +33,8 @@
 
     <div class="content-right">
       <div class="top-tools">
-        <div></div>
+        <div class="top-tool-main-right">
-        <div>
+          <div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
           <export-excel
             export-file-name="asset"
             export-url="/asset/export"
@@ -45,8 +45,6 @@
                 <i class="nz-icon nz-icon-create-square" @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" ></i>
             </template>
           </export-excel>
-
-          <div class="top-tool-search float-left margin-r-20"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
         </div>
       </div>
 
@@ -711,9 +709,6 @@
         this.pageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getAssetData();
-        this.$nextTick(() => {
-          this.gutterHandler(".nz-table");
-        });
       },
       getPrincipalName(data) {
         for (let item in this.idcUserData) {
@@ -784,7 +779,6 @@
       }
 
       this.$nextTick(() => {
-        this.gutterHandler(".nz-table");
         //左侧dc列表初始选中状态
         if (this.$store.state.assetData.selectedData.length > 0) {
           this.checkList = [];

nezha-fronted/src/components/page/config/account.vue

@@ -22,15 +22,14 @@
     </div>
     <div class="content-right">
       <div class="top-tools">
-        <div></div>
+        <div class="top-tool-main-right">
-        <div>
+          <div class="top-tool-search margin-r-20">
-          <button type="button" @click="toAdd"  :title="$t('overall.createAccount')"
-                  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="account-add">
-                  <i class="nz-icon-create-square nz-icon"></i>
-          </button>
-          <div class="top-tool-search float-right">
             <search-input :searchMsg="searchMsg" @search="search"></search-input>
           </div>
+          <button type="button" @click="toAdd"  :title="$t('overall.createAccount')"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light" id="account-add">
+                  <i class="nz-icon-create-square nz-icon"></i>
+          </button>
         </div>
       </div>
       <el-table
@@ -495,9 +494,6 @@
         this.pageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
-        this.$nextTick(() => {
-          this.gutterHandler(".nz-table");
-        });
       },
       search: function (searchObj) {
         this.searchLabel = {};
@@ -527,7 +523,6 @@
       this.getTableData();
       this.initReceiverData();
       this.$nextTick(() => {
-        this.gutterHandler(".nz-table");
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.accountTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {

nezha-fronted/src/components/page/config/dc.vue

@@ -53,15 +53,14 @@
       <!--dc table start-->
       <div class="content-right" v-if="tabShow==1">
         <div class="top-tools">
-          <div></div>
+          <div class="top-tool-main-right">
-          <div>
+            <div class="top-tool-search">
-            <button type="button" @click="toAdd" :title="$t('overall.createDatacenter')"
-                    class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="dc-add">
-              <i class="nz-icon-create-square nz-icon"></i>
-            </button>
-            <div class="top-tool-search float-right">
               <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" v-if="tabShow==1"></search-input>
             </div>
+            <button type="button" @click="toAdd" :title="$t('overall.createDatacenter')"
+                    class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
+              <i class="nz-icon-create-square nz-icon"></i>
+            </button>
           </div>
         </div>
         <el-table
@@ -496,9 +495,6 @@
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.pageObj.pageSize = val;
         this.getTableData();
-        this.$nextTick(() => {
-          this.gutterHandler(".nz-table");
-        });
       },
       search: function (searchObj) {
         this.searchLabel = {};
@@ -576,7 +572,6 @@
 
       this.getTableData();
       this.$nextTick(function(){
-        this.gutterHandler(".nz-table");
         this.getUserData();//绑定滚动条事件，控制top按钮
         let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {

nezha-fronted/src/components/page/config/model.vue

@@ -22,15 +22,14 @@
     </div>
     <div class="content-right">
       <div class="top-tools">
-        <div></div>
+        <div class="top-tool-main-right">
-        <div>
+          <div class="top-tool-search">
-          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20"  :title="$t('overall.createModel')"
+            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+          </div>
+          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20"  :title="$t('overall.createModel')"
                   id="model-add">
                     <i class="nz-icon-create-square nz-icon"></i>
           </button>
-          <div class="top-tool-search float-right">
-            <search-input :searchMsg="searchMsg" @search="search"></search-input>
-          </div>
         </div>
       </div>
       <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table>
@@ -251,9 +250,6 @@
         this.pageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
-        this.$nextTick(() => {
-          this.gutterHandler(".nz-table");
-        });
       },
       search: function (searchObj) {
         this.pageObj.pageNo = 1;
@@ -287,7 +283,6 @@
 
       this.getTableData();
       this.$nextTick(() => {
-        this.gutterHandler(".nz-table");
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.modelTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {

nezha-fronted/src/components/page/config/promServer.vue

@@ -22,15 +22,14 @@
     </div>
     <div class="content-right">
       <div class="top-tools">
-        <div></div>
+        <div class="top-tool-main-right">
-        <div>
+          <div class="top-tool-search">
-          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20"  :title="$t('overall.createPrometheusServer')"
+            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+          </div>
+          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20"  :title="$t('overall.createPrometheusServer')"
                   id="prom-add">
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
-          <div class="top-tool-search float-right">
-            <search-input :searchMsg="searchMsg" @search="search"></search-input>
-          </div>
         </div>
       </div>
       <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
@@ -563,9 +562,6 @@
         this.pageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getTableData();
-        this.$nextTick(() => {
-          this.gutterHandler(".nz-table");
-        });
       },
       search: function (searchObj) {
         this.pageObj.pageNo = 1;
@@ -658,7 +654,6 @@
       this.getIdcData();
       this.getUserData();
       this.$nextTick(() => {
-        this.gutterHandler(".nz-table");
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -10,7 +10,7 @@
     </div>
     <div class="content-right">
       <div class="top-tools">
-        <div>
+        <div class="top-tool-main-left">
           <el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" v-scrollBar:el-dropdown>
             <el-row  :gutter="10" class="el-dropdown-link" style="">
               <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
@@ -31,7 +31,7 @@
             </el-dropdown-menu>
           </el-dropdown>
         </div>
-        <div class="top-tool-right">
+        <div class="top-tool-main-right">
           <div class="top-tool-search relative-position margin-r-20">
             <el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput"  @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable   >
               <i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>

nezha-fronted/src/components/page/project/project.vue

@@ -70,10 +70,6 @@
   .window-control-btn>i:hover {
     color: $global-text-color-active;
   }
-  .abc {
-    right: 100% !important;
-    transform: translateX(100%);
-  }
   .pagination-top {
     transition: .2s transform;
   }
@@ -134,9 +130,9 @@
           </export-excel>
 
         </div>-->
-        <div class="top-tools" style="position: relative;flex-direction:row-reverse;" :class="{'top-tools-reverse': tableShow == 3}" v-show="mainResizeShow">
+        <div class="top-tools" v-show="mainResizeShow">
           <!--<div class="pagination-top"></div>-->
-          <div style="position: absolute; right: 0; display: flex; align-items: center; transition: .4s right, .4s transform;" :class="{'abc': tableShow == 3}">
+          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': tableShow == 3}">
             <div class="top-tool-search"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
             <export-excel
               export-file-name="endpoint"
@@ -144,7 +140,7 @@
               :params="endpointSearchLabel"
               @afterImport="getEndpointTableData"
               class="margin-l-20"
-              style="width: 59px;"
+              style="width: 57px;"
             >
               <template slot="optionZone">
                 <i class="nz-icon nz-icon-create-square" @click.stop="toCreateEndpoint" :title="$t('overall.createProject')" ></i>
@@ -218,6 +214,7 @@
         <div class="sub-top-tools" v-show="subResizeShow">
           <div class="sub-list-tabs margin-l-20" style="width: calc(100% - 780px);">
             <div class="sub-list-tab">{{$t("overall.query")}}</div>
+            <span class="sub-list-tab-txt">Endpoint ID: {{curEndpoint ? curEndpoint.id : ''}}</span>
           </div>
           <!--时间选择器-->
           <div class="top-tool-right">
@@ -251,7 +248,6 @@
                     </el-dropdown-item>
                   </el-col>
                 </el-row>
-
               </el-dropdown-menu>
             </el-dropdown>
             <div class="sub-list-window-control">
@@ -284,9 +280,6 @@
             align="center"
             :selectable="selectable"
           >
-            <template slot="header" slot-scope="slot">
-
-            </template>
           </el-table-column>
 
           <el-table-column
@@ -1066,9 +1059,6 @@
         this.endpointPageObj.pageSize = val;
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getEndpointTableData();
-        this.$nextTick(() => {
-          this.gutterHandler(".endpoint-table");
-        });
       },
       metricsPageNo(val) {
         this.metricPageObj.pageNo = val;
@@ -1360,7 +1350,6 @@
                 }
                 this.showTableDataCopy=JSON.stringify(this.showTableData);
                 this.queryEdpLoading=false;
-                this.gutterHandler(".endpoint-query-table"); //控制table右边距
                 this.showTopBtn2 = false;
                 this.$nextTick(() => {
                   //绑定滚动条事件，控制top按钮
@@ -1377,9 +1366,6 @@
                 });
               }
           });
-          this.$nextTick(() => {
-            this.gutterHandler(".endpoint-table");
-          });
         }, 400);
       },
       backToEdpTab:function(){
@@ -1402,10 +1388,6 @@
         // 主列表恢复全屏
         this.mainResizeShow = this.subResizeShow = true;
         document.querySelector('.main-list').style.height = "";
-
-        this.$nextTick(() => {
-          this.gutterHandler(".endpoint-table");
-        });
       },
       changeTime:function(size,unit){
         let time=this.getTime(size,unit);
@@ -1774,7 +1756,6 @@
         this.getEndpointTableData();
       }, 200);
       this.$nextTick(() => {
-        this.gutterHandler(".endpoint-table");
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {

nezha-fronted/src/main.js

@@ -113,17 +113,6 @@ Vue.prototype.toTop = (type, wrap) => { //top按钮公共方法
     }
   }
 };
-Vue.prototype.gutterHandler = (tableClass) => {
-  setTimeout(() => {
-    let gutterCol = document.querySelector(tableClass + " col[name='gutter']");
-    //console.info(gutterCol.attributes['width'].value)
-    if (gutterCol.attributes['width'].value != '0') {
-      //console.info(gutterCol)
-      gutterCol.attributes['width'].value = '1';
-      document.querySelector(tableClass + ' .el-table__body').attributes['style'].value = "width: calc(100% - 10px)";
-    }
-  }, 1000)
-}
 
 Vue.config.productionTip = false;
 Vue.use(ElementUI);
@@ -136,7 +125,7 @@ const el_scrollBar = el => {
     el._ps_.update();
   } else {
     //el上挂一份属性
-    el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 20});
+    el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 25});
   }
 };
 Vue.directive("scrollBar", {
@@ -148,6 +137,9 @@ Vue.directive("scrollBar", {
     } else if (arg === "el-dropdown") {
       el = el.querySelector(".el-dropdown-menu");
       !el && console.warn("未发现className为el-dropdown-menu的dom");
+    } else if (arg == "legend") {
+      el = el.querySelector(".legend-container");
+      !el && console.warn("未发现className为legend-container的dom");
     }
 
     // 启用x轴后不让原生滚动条出来作乱
@@ -277,3 +269,8 @@ export default vm;
     }
   }
 })*/
+
+/* 重写组件内容 */
+const elUi = require("element-ui");
+//去掉el-table右侧的滚动条预留空间
+elUi.Table.components.TableHeader.computed.hasGutter = () => {return false;};