组装表格动态列表及多功能下载

·  阅读 34

image.png

合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下

项目需求

  1. 表格纵列勾选显示隐藏
  2. 表格支持前段前端导出,支持导出全部,勾选导出
  3. 表格导出可以自由勾选纵裂
  4. 表格导出可以自定义文件类型,文件标题

效果展示

未标题-2.gif

功能设计与实现

页面内统一的card风格,封装tableProBar作为表格外框,外框统一处理column显示的勾选,文件格式的下拉选择,以及支持文件名自定义

  • 首先封装tableProBar 抄袭Element ui源码 添加一些需要的右侧显示按钮

image.png

  • 按照需求在外框里面添加 列表勾选显示 文件类型下拉选择

raycast-untitled (1).png

  • 最后就是下载表格和组件传值,当checkbook发生变化,传值给父组件

raycast-untitled (2).png

tableProBar封装好之后就是页面的调用

raycast-untitled (3).png

贴一下tableHeaderTopTxtShow的数据格式

const goodsandstorageTable = [
    {'key': 'ID', 'value': 'id'},
    {'key': '商品ID', 'value': 'goodsId'},
    {'key': '商品名', 'value': 'goodsName'},
    {'key': '仓库ID', 'value': 'storageId'},
    {'key': '仓库名', 'value': 'storageName', 'width': 120},
    {'key': '商品库存', 'value': 'goodsNum'},
    {'key': '创建时间', 'value': 'createtime'},
    {'key': '状态', 'value': 'onlineSwitch', type: ['上架','下架']}
]
一个组件间的传值
checkChangeTable(value){
    this.tableHeaderTopTxtShow = value
}
复制代码

总结

总体来说没用什么高级的东西,都是最基础功能之间的组合,本身项目是后台管理系统,需要导出的地方有很多就统一处理一下。这么简单为什么还写文章发出来,就是单纯摸鱼水文章。

优化

本身之前写项目时间比较赶,写的比较粗糙,后面还有很多优化需要做,例如:

  1. column勾选不显示后,再点击显示会把列添加到最后面,而不是源为止,需要sort标识一下位置进行排序。
  2. 根据使用情况,把用户勾选不显示的设置本地存储起来。
  3. 当导出大数据量时候1000条,5000条时,页面渲染可能会很慢很慢,导出大数据量时候,数据单独存储不进行页面渲染直接供导出使用。

源代码

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改