perf: 引入pl-table，解决table数据过多卡顿问题

nezha-fronted/package-lock.json

@@ -7438,6 +7438,25 @@
         "find-up": "^2.1.0"
       }
     },
+    "pl-table": {
+      "version": "2.5.8",
+      "resolved": "https://registry.npmjs.org/pl-table/-/pl-table-2.5.8.tgz",
+      "integrity": "sha512-XFTxK3tXhZO3hR7l40qZkYI2RsOPiwUlTrJ8ZdEzYXXeuVmO/JW5I+2xKNBqXK0QkZJ6sjbTWsCMdm6KC7UjXw==",
+      "requires": {
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "plxy-grid": "^2.8.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1",
+        "vuedraggable": "^2.20.0",
+        "xe-utils": "2.3.0"
+      }
+    },
+    "plxy-grid": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/plxy-grid/-/plxy-grid-2.8.3.tgz",
+      "integrity": "sha512-udl+J0sCjTyLJScMVnAfSTvyqyd9VbNlZ76ywMTqaKZKLnGykuOaUr77YLKH6OMgfBoX30MftjRticvjNca98g=="
+    },
     "portfinder": {
       "version": "1.0.25",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
@@ -12736,6 +12755,11 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "xe-utils": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/xe-utils/-/xe-utils-2.3.0.tgz",
+      "integrity": "sha512-AGb3oZxoktHHk1i1TD/v6aQyUbJUqMNuBp1zMFuNBCT8HjP7OD+C1X/8m14jzxOC1YeXfoHwwYmGDUMgqZnsFg=="
+    },
     "xlsx": {
       "version": "0.15.6",
       "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.15.6.tgz",

nezha-fronted/package.json

@@ -15,6 +15,7 @@
     "element-ui": "^2.13.0",
     "file-saver": "^2.0.2",
     "node-sass": "^4.13.1",
+    "pl-table": "^2.5.8",
     "vue": "^2.5.2",
     "vue-i18n": "^8.15.1",
     "vue-resource": "^1.5.1",

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

@@ -660,11 +660,15 @@ li{
 /* end--二级顶部工具栏*/
 
 /* start--内容*/
-.nz-table.el-table{
+.nz-table {
   border: none;
   font-size: 12px;
 }
-.nz-table.el-table::before {
+.nz-table .el-table {
+  border: none;
+  font-size: 12px;
+}
+.nz-table::before {
   height: 0;
 }
 .nz-table .el-table__fixed-right::before, .nz-table .el-table__fixed::before {
@@ -676,17 +680,17 @@ li{
 .nz-table .el-table__header {
   line-height: 36px;
 }
-.nz-table.el-table .el-table__header th {
+.nz-table .el-table__header th {
   color: #666666;
   font-weight: normal;
   font-size: 14px;
   border-left: 1px solid white;
   border-bottom: 1px solid #d4d4d4;
 }
-.nz-table.el-table .el-table__header th:first-of-type {
+.nz-table .el-table__header th:first-of-type {
   border-left: none;
 }
-.nz-table.el-table .el-table__header th:nth-last-child(2) {
+.nz-table .el-table__header th:nth-last-child(2) {
   border-right: none;
 }
 .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 {
@@ -695,37 +699,40 @@ li{
 .nz-table .el-table__body {
   width: 100% !important;
 }
-.chart-table .nz-table.el-table td {
+.nz-table .el-table__virtual-wrapper {
+  width: 100% !important;
+}
+.chart-table .nz-table td {
   background-color: white;
 }
-.nz-table.el-table td {
+.nz-table td {
   padding: 0;
   background-color: $content-right-background-color;
 }
-.nz-table.el-table td.has-message .cell {
+.nz-table td.has-message .cell {
   background-color: #f8d7da;
 }
-.nz-table.el-table td.has-no-message .cell {
+.nz-table td.has-no-message .cell {
   background-color: #d4edda;
 }
-.nz-table.el-table th {
+.nz-table th {
   padding: 0;
 }
-.nz-table.el-table th:last-of-type {
+.nz-table th:last-of-type {
   background-color: $content-right-background-color;
 }
 .nz-table .el-table__body-wrapper {
   background-color: $content-right-background-color;
   overflow: hidden;
 }
-.chart-table .nz-table.el-table th:last-of-type {
+.chart-table .nz-table th:last-of-type {
   background-color: white;
 }
 .chart-table .nz-table .el-table__body-wrapper {
   background-color: white;
 }
 //小信息栏边框
-.nz-table.el-table th .cell{
+.nz-table th .cell{
   height: 32px;
   line-height: 32px;
   display:flex;
@@ -733,11 +740,11 @@ li{
   border-right: 1px solid #d4d4d4;
   /*box-shadow: inset -1px -2px 1px 0 rgba(0,0,0,0.11), inset 2px 2px 1px 0 rgba(255,255,255,0.50);*/
 }
-.nz-table.el-table td .cell{
+.nz-table td .cell{
   min-height: 38px;
   line-height: 38px;
 }
-.nz-table.el-table td.alert-message-list-labels .cell{
+.nz-table td.alert-message-list-labels .cell{
   line-height: unset;
   padding: 3px;
 }

nezha-fronted/src/components/common/language/cn.js

@@ -603,7 +603,8 @@ const cn = {
       requiredMibFile: "必须上传MIB文件",
       vendor: "厂商",
       type: "类型",
-      mibBrowser: "MIB浏览器"
+      mibBrowser: "MIB浏览器",
+      noData: "暂无数据"
     },
     system: {
       system: "系统设置",

nezha-fronted/src/components/common/language/en.js

@@ -607,6 +607,7 @@ const en = {
       vendor:'Vendor',
       type:'Type',
       mibBrowser: 'MIB browser',
+      noData: "No Data"
     },
     system:{
       system:'System',

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

@@ -217,20 +217,21 @@
             <span @click="clearResult" class="mib-browser-table-op" :title="$t('overall.clear')"><i class="el-icon-close"></i></span>
           </span>
         </div>
-        <el-table :data="resultData" border class="mib-browser-table nz-table" v-scrollBar:el-table height="calc(100% - 31px)" style="width: 100%;" v-loading="loading">
+        <pl-table :row-height="28" use-virtual :datas="resultData" border :empty-text="$t('config.mib.noData')"
-          <el-table-column label="Name/OID">
+                  class="mib-browser-table nz-table" style="width: 100%;height: calc(100% - 31px)" v-loading="loading" v-scrollBar:el-table :pagination-show="false">
-            <div slot-scope="scope" class="too-long-split" @click="searchParam.oid = scope.row.oid">{{scope.row.name ? scope.row.name : scope.row.oid}}</div>
+          <pl-table-column label="Name/OID" v-slot="{row}">
-          </el-table-column>
+            <div class="too-long-split" @click="searchParam.oid = row.oid">{{row.name ? row.name : row.oid}}</div>
-          <el-table-column label="Value">
+          </pl-table-column>
-            <div slot-scope="scope" @click="searchParam.oid = scope.row.oid">{{scope.row.value}}</div>
+          <pl-table-column label="Value" v-slot="{row}">
-          </el-table-column>
+            <template><div @click="searchParam.oid = row.oid">{{row.value}}</div></template>
-          <el-table-column label="Type">
+          </pl-table-column>
-            <div slot-scope="scope" @click="searchParam.oid = scope.row.oid">{{scope.row.type}}</div>
+          <pl-table-column label="Type" v-slot="{row}">
-          </el-table-column>
+            <template><div @click="searchParam.oid = row.oid">{{row.type}}</div></template>
-          <el-table-column label="IP:Port">
+          </pl-table-column>
-            <div slot-scope="scope" @click="searchParam.oid = scope.row.oid">{{scope.row.ip + (scope.row.port ? ":" + scope.row.port : "")}}</div>
+          <pl-table-column label="IP:Port" v-slot="{row}">
-          </el-table-column>
+            <template><div @click="searchParam.oid = row.oid">{{row.ip + (row.port ? ":" + row.port : "")}}</div></template>
-        </el-table>
+          </pl-table-column>
+        </pl-table>
       </div>
     </div>
 
@@ -749,11 +750,11 @@
   }
 }
 
-.mib-browser-table.nz-table.el-table th .cell {
+.mib-browser-table.nz-table th .cell {
   height: 28px;
   line-height: 28px;
 }
-.mib-browser-table.nz-table.el-table td .cell {
+.mib-browser-table.nz-table td .cell {
   height: 28px;
   min-height: 28px;
   line-height: 28px;

nezha-fronted/src/main.js

@@ -14,9 +14,14 @@ import App from './App'
 import router from './router'
 import VueResource from 'vue-resource'
 import axios from 'axios';
+
+import plTable from 'pl-table'
+import 'pl-table/themes/index.css'
+
 import {post, get, put, del} from './http.js'
 import {toTop, clickoutside, scrollBar, bottomBoxWindow} from './tools.js'
 
+
 import Pagination from "./components/common/pagination"; //引入全局分页组件
 import searchInput from "./components/common/searchInput"; //搜索框组件
 import elementSet from "./components/common/elementSet"; //自定义表头组件
@@ -85,6 +90,7 @@ Vue.config.productionTip = false;
 Vue.use(ElementUI);
 Vue.use(Vuex);
 Vue.use(VueResource);
+Vue.use(plTable);
 
 /*指令*/
 Vue.directive('clickoutside', clickoutside);
@@ -103,5 +109,7 @@ export default vm;
 
 /* 重写组件内容 */
 const elUi = require("element-ui");
+const pl = require("pl-table");
 //去掉el-table表头右侧的滚动条预留空间
 elUi.Table.components.TableHeader.computed.hasGutter = () => {return false;};
+pl.PlTable.components.ElTable.components.TableHeader.computed.hasGutter = () => {return false;};