需求
运维需要,需要把运维时命令行查询的结果在前端展示,对界面有一些特定的要求,这里分享下一些主要功能的实现。
- 1、要求前端表格界面动态生成,方便后台修改
- 2、列值可排序(时间比较、数值比较…)
- 3、列值可筛选(根据列值类型…)
- 4、表格数据可导出
Excel
,文件名接口返回(因为模块很多)+当前时间。 - 5、提供关键列搜索功能
实现
- 前端界面用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
字段。
关键列搜索功能
- 1、可选搜索列
- 2、输入搜索内容
- 3、搜索、重置
搜索功能的时候,主要是用了数组的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时代里的大佬了,此项目里的解决方案对大多数的中后台项目都很值得参考。感谢大佬的贡献!