perf: dashboard的表格自定义滚动条等

1.dashboard的表格增加自定义滚动条
2.修复asset侧滑里vendor点击会关闭侧滑的问题

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

@@ -507,6 +507,7 @@ li{
 }
 .nz-table .el-table__body-wrapper {
   background-color: $content-right-background-color;
+  overflow: hidden;
 }
 .chart-table .nz-table.el-table th:last-of-type {
   background-color: white;
@@ -628,7 +629,7 @@ li{
   width: 520px;
 }
 .right-box-add-asset, .right-box-add-chart {
-  width: 550px;
+  width: 520px;
 }
 .right-box-chart .el-input__inner, .right-box-chart input {
   background-color: white;

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

@@ -25,7 +25,7 @@
 
         </div>
         <div class="mt-10" v-cloak  v-show="firstShow">
-            <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :data="seriesItem" :height="350" border  tooltip-effect="light" v-cloak>
+            <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :data="seriesItem" :height="350" border  tooltip-effect="light" v-cloak v-scrollBar:el-table>
                 <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
                 <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
                 <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
@@ -42,7 +42,7 @@
                 <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
               </div>
             </div>
-                <el-table style="margin-top: 30px;" class="nz-table" :data="seriesItemScreen" :height="350" border  tooltip-effect="light">
+                <el-table style="margin-top: 30px;" class="nz-table" :data="seriesItemScreen" :height="350" border  tooltip-effect="light" v-scrollBar:el-table>
                     <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
                     <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
                     <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>

nezha-fronted/src/components/common/rightBox/assetBox.vue

@@ -90,7 +90,7 @@
                 </div>
               </el-option>
             </el-select>
-            <div class="right-box-row-btn right-box-row-btn-small" v-if="!tabView">
+            <div class="right-box-row-btn " v-if="!tabView">
               <el-popover
                 placement="left"
                 trigger="click"
@@ -172,7 +172,7 @@
                 class="right-box-row-with-btn"
               >
               </el-cascader>
-              <div class="right-box-row-btn right-box-row-btn-small" v-if="!tabView">
+              <div class="right-box-row-btn " v-if="!tabView">
                 <el-popover
                   placement="left"
                   trigger="click"
@@ -323,7 +323,7 @@
 <!--                  </div>-->
                 </el-option>
               </el-select>
-<!--              <div class="right-box-row-btn right-box-row-btn-small">-->
+<!--              <div class="right-box-row-btn ">-->
 <!--                <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>-->
 <!--              </div>-->
             </template>
@@ -368,7 +368,7 @@
                 </el-option>
               </el-select>
 
-<!--              <div class="right-box-row-btn right-box-row-btn-small">-->
+<!--              <div class="right-box-row-btn ">-->
 <!--                <cabinet-config-box placement="left" :post-cabinet="addCabinetData"  @after="getCabinetOptionData"></cabinet-config-box>-->
 <!--              </div>-->
             </template>

nezha-fronted/src/main.js

@@ -75,12 +75,11 @@ const el_scrollBar = el => {
     el._ps_.update();
   } else {
     //el上挂一份属性
-    el._ps_ = new PerfectScrollbar(el, {});
+    el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 20});
   }
 };
 Vue.directive("scrollBar", {
   inserted(el, binding, vnode) {
-    console.info(1)
     const { arg } = binding;
     if (arg === "el-table") {
       el = el.querySelector(".el-table__body-wrapper");
@@ -109,7 +108,6 @@ Vue.directive("scrollBar", {
     el_scrollBar(el);
   },
   componentUpdated(el, binding, vnode, oldVnode) {
-    console.info(2)
     const { arg } = binding;
     if (arg === "el-table") {
       el = el.querySelector(".el-table__body-wrapper");
@@ -127,7 +125,7 @@ Vue.directive("scrollBar", {
   },
 });
 
-const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown']; //clickoutside排除的class(白名单)
+const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown']; //clickoutside排除的class(白名单)
 const clickoutside = {
   // 初始化指令
   bind(el, binding, vnode) {