Vue+ Element，记动态生成表格在一个运维项目中的应用

需求

运维须要，须要把运维时命令行查询的结果在前端展现，对界面有一些特定的要求，这里分享下一些主要功能的实现。css

一、要求前端表格界面动态生成，方便后台修改
二、列值可排序（时间比较、数值比较......）
三、列值可筛选（根据列值类型......）
四、表格数据可导出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的属性要一一对应好。模拟数据以下，通常根据需求提供好字段，直接让后台按此格式传就好了。vue

{
  "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": "美食"
      }
    ]
  }
}
复制代码

这时候获得的表格长这样git

列值排序

el-table自己就提供了列值排序的功能。直接给el-table-column加上sortable属性就能够了。实际应用的时候，通常哪一列能够排序，是须要配置的，这时候，给模拟数据的cols每项加上一个"sortable": true或者"sortable": false就好了github

具体数据参考 table.json文件element-ui

加了排序属性后，表格长这样json

前3列配置了true，点击小箭头，就能够升序或者降序查看列表的数据数组

列值筛选

有时候，列值是一些分类值来的，例如地区、服务器种类、状态等。这时候就须要筛选了。el-table自己就提供了列值筛选的功能。一样，实际应用的时候，通常哪一列能够显示筛选项，是须要配置的，这时候，给模拟数据的cols每项加上一个"filters": []的数组，里面存放筛选项。服务器

这里要注意markdown

默认传空就是列无筛选功能
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>
复制代码

表格数据导出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时代里的大佬了，此项目里的解决方案对大多数的中后台项目都很值得参考。感谢大佬的贡献！