Vue+ Element，记动态生成表格在一个运维项目中的应用 |
您所在的位置：网站首页 › 动态生成表格案例分享怎么弄 › Vue+ Element，记动态生成表格在一个运维项目中的应用 |
Vue+ Element，记动态生成表格在一个运维项目中的应用
|
需求
运维需要，需要把运维时命令行查询的结果在前端展示，对界面有一些特定的要求，这里分享下一些主要功能的实现。 1、要求前端表格界面动态生成，方便后台修改 2、列值可排序（时间比较、数值比较......） 3、列值可筛选（根据列值类型......） 4、表格数据可导出Excel，文件名接口返回（因为模块很多）+当前时间。 5、提供关键列搜索功能 实现 前端界面用element-ui，组件按需引入 数据通过本地mock实现，参考vue本地模拟服务器请求mock数据 表格界面动态生成表格主要用el-table实现。主要代码如下 {{ scope.row[col.prop] }}想动态生成表格，主要是要和后台约定好传输的数据。表头数据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来动态控制此图标的显隐。具体看下面的代码了。 {{ scope.row[col.prop] }}相关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的代码直接用的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时代里的大佬了，此项目里的解决方案对大多数的中后台项目都很值得参考。感谢大佬的贡献！ |
【本文地址】
今日新闻 |
推荐新闻 |