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

需求

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

  • 1、要求前端表格界面动态生成，方便后台修改
  • 2、列值可排序（时间比较、数值比较……）
  • 3、列值可筛选（根据列值类型……）
  • 4、表格数据可导出Excel，文件名接口返回（因为模块很多）+当前时间。
  • 5、提供关键列搜索功能

实现

表格界面动态生成

表格主要用el-table实现。主要代码如下

1
2
3
4
5
6
7
8
9
10
11
<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的属性要一一对应好。模拟数据如下，一般根据需求提供好字段，直接让后台按此格式传就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
{
  "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来动态控制此图标的显隐。具体看下面的代码了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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

1
2
3
4
5
6
7
8
9
10
::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字段。

关键列搜索功能

  • 1、可选搜索列
  • 2、输入搜索内容
  • 3、搜索、重置

搜索功能的时候，主要是用了数组的filter匹配功能，搜的是本地数据，具体实现看代码了。

同样，实际应用的时候，一般哪一列可以搜索，是需要配置的，这时候，在模拟数据里面添加一个searchcols数组，用来下拉选择搜索列。

这个是最终效果了

代码总览

主要涉及的文件如下（具体参考代码）：

1
2
3
4
5
6
7
8
9
10
11
|-- public
    |-- data
        |-- table.json   // 模拟数据
|-- src
    |-- utils
        |-- Export2Excel.js    // 导出Excel
    |-- views
        |-- dynamicTableTest    // 实例所在
            |-- index.vue
            |-- index.scss
            |-- index.js

代码

按代码总览的目录去代码里找着看就行了。

总结

简单了实现了下动态表格，这个模块可以封装成一个组件使用，或者通过mixin在每个页面里面使用，还算方便。

谢谢

PanJiaChen的全家桶项目vue-element-admin可以说是vue2时代里的大佬了，此项目里的解决方案对大多数的中后台项目都很值得参考。感谢大佬的贡献！