Vue+ Element，記動態生成表格在一個運維項目中的應用

需求

運維須要，須要把運維時命令行查詢的結果在前端展現，對界面有一些特定的要求，這裏分享下一些主要功能的實現。

• 一、要求前端表格界面動態生成，方便後臺修改
• 二、列值可排序（時間比較、數值比較......）
• 三、列值可篩選（根據列值類型......）
• 四、表格數據可導出Excel，文件名接口返回（由於模塊不少）+當前時間。
• 五、提供關鍵列搜索功能

實現

• 前端界面用element-ui，組件按需引入
• 數據經過本地mock實現，參考vue本地模擬服務器請求mock數據

表格界面動態生成

表格主要用el-table實現。主要代碼以下

<el-table :data="tableShowData" :border="true" height="420" style="width: 100%">
  <el-table-column
    v-for="col in tableCols"
    :key="col.prop"
    :prop="col.prop"
    :label="col.label">
    <template slot-scope="scope">
      {{ scope.row[col.prop] }}
    </template>
  </el-table-column>
</el-table>
複製代碼

想動態生成表格，主要是要和後臺約定好傳輸的數據。表頭數據cols、列表數據 data的屬性要一一對應好。模擬數據以下，通常根據需求提供好字段，直接讓後臺按此格式傳就好了。

{
  "code": 0,
  "msg": "成功",
  "result": {
    "cols": [
      {
        "prop": "date",
        "label": "日期"
      },
      {
        "prop": "name",
        "label": "姓名"
      },
      {
        "prop": "address",
        "label": "地址"
      },
      {
        "prop": "type",
        "label": "類型"
      }
    ],
    "data": [
      {
        "date": "2021-08-02",
        "name": "小紅",
        "address": "王子山",
        "type": "旅遊"
      },
      {
        "date": "2021-08-06",
        "name": "小智",
        "address": "探魚",
        "type": "美食"
      },
      {
        "date": "2021-08-03",
        "name": "小明",
        "address": "石頭記",
        "type": "旅遊"
      },
      {
        "date": "2021-08-07",
        "name": "小偉",
        "address": "如軒砂鍋粥",
        "type": "美食"
      },
      {
        "date": "2021-08-04",
        "name": "小李",
        "address": "香草世界",
        "type": "旅遊"
      },
      {
        "date": "2021-08-08",
        "name": "小二",
        "address": "柴竈魚",
        "type": "美食"
      },
      {
        "date": "2021-08-05",
        "name": "小黃",
        "address": "融創文旅城",
        "type": "旅遊"
      },
      {
        "date": "2021-08-09",
        "name": "小四",
        "address": "佬麻雀",
        "type": "美食"
      }
    ]
  }
}
複製代碼

這時候獲得的表格長這樣

列值排序

el-table自己就提供了列值排序的功能。直接給el-table-column加上sortable屬性就能夠了。實際應用的時候，通常哪一列能夠排序，是須要配置的，這時候，給模擬數據的cols每項加上一個"sortable": true或者"sortable": false就好了

具體數據參考 table.json文件

加了排序屬性後，表格長這樣

前3列配置了true，點擊小箭頭，就能夠升序或者降序查看列表的數據

列值篩選

有時候，列值是一些分類值來的，例如地區、服務器種類、狀態等。這時候就須要篩選了。el-table自己就提供了列值篩選的功能。一樣，實際應用的時候，通常哪一列能夠顯示篩選項，是須要配置的，這時候，給模擬數據的cols每項加上一個"filters": []的數組，裏面存放篩選項。

這裏要注意

• 默認傳空就是列無篩選功能
• filters裏面要包含篩選項的 text 和 value 屬性。具體值要和列對應

具體數據參考 table.json文件

接着按el-table文檔配置就好了

加了篩選屬性後，表格長這樣

這裏要注意了，上面只給類型列配置了非空的filters，沒配置的不該該出現篩選小箭頭的。

el-table的列值篩選功能，會在表頭用一個下箭頭圖標來控制，此圖標沒提供顯示、隱藏的功能，致使不須要提供列值篩選功能的列也會顯示這個圖標，這裏利用el-table-column的class-name屬性，使用vue的樣式穿透::v-deep來動態控制此圖標的顯隱。具體看下面的代碼了。

<el-table :data="tableShowData" :border="true" height="420" style="width: 100%">
  <el-table-column
    v-for="col in tableCols"
    :key="col.prop"
    :prop="col.prop"
    :label="col.label"
    :filters="col.filters"
    filter-placement="bottom-end"
    :filter-method="filterTag"
    :sortable="col.sortable"
    :class-name="col.filters.length==0?'hide-filter':'show-filter'">
    <template slot-scope="scope">
      {{ scope.row[col.prop] }}
    </template>
  </el-table-column>
</el-table>
複製代碼

相關css

::v-deep .hide-filter {
  .el-table__column-filter-trigger {
    display: none !important;
  }
}
::v-deep .show-filter {
  .el-table__column-filter-trigger {
    display: inline-block !important;
  }
}
複製代碼

調整後，表格長這樣

表格數據導出Excel

導出Excel的代碼直接用的PanJiaChen的全家桶項目vue-element-admin裏的代碼。沒什麼好說的。

主要是實際應用的時候，能夠在接口數據裏面傳文件名，方便識別下載模塊。例如，這裏就在模擬數據裏面定義了一個filename字段。

關鍵列搜索功能

• 一、可選搜索列
• 二、輸入搜索內容
• 三、搜索、重置

搜索功能的時候，主要是用了數組的filter匹配功能，搜的是本地數據，具體實現看代碼了。

一樣，實際應用的時候，通常哪一列能夠搜索，是須要配置的，這時候，在模擬數據裏面添加一個searchcols數組，用來下拉選擇搜索列。

這個是最終效果了

代碼總覽

主要涉及的文件以下（具體參考代碼）：

|-- public
    |-- data
        |-- table.json   // 模擬數據
|-- src
    |-- utils
        |-- Export2Excel.js    // 導出Excel
    |-- views
        |-- dynamicTableTest    // 實例所在
            |-- index.vue
            |-- index.scss
            |-- index.js
複製代碼

代碼

按代碼總覽的目錄去代碼裏找着看就好了。

總結

簡單了實現了下動態表格，這個模塊能夠封裝成一個組件使用，或者經過mixin在每一個頁面裏面使用，還算方便。

謝謝

PanJiaChen的全家桶項目vue-element-admin能夠說是vue2時代裏的大佬了，此項目裏的解決方案對大多數的中後臺項目都很值得參考。感謝大佬的貢獻！