vxetable3默认导出内容忽略表尾

192 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第25天,点击查看活动详情

0 环境

  • 编辑器:pycharm或者vscode
  • 系统版本:windows10
  • vue版本:2.6.10
  • vxetable版本:v3+

1 文档文档准备

官方文档

固定类型 + 导入/导出

默认导出

2 前言

为啥会选择vxetable,因为vxetable功能比element表格强大太多了,比如文档里的快速入门,它支持js、ts、jsx的写法,集成了一些常用的功能,图标、输入框、表单等等,比如输入框中的日期选择器,比element中代码量少了很多。最后关注的就是是否收费,虽然它有收费版,但是免费版就很强大了。vxetable现在文档显示可用的,v3+、v4+,由于历史遗留问题,项目并没有升到vue3,只能集成vxetable3+,有的问题vxetable4+里是没有的,这里记录一下,吾认为比较通用的问题。

3 导出内容忽略表尾的内容

一般为省事,选择高级导出就如下图所示,点击导出按钮,弹出一个导出的选择框,在里面选择参数,这里面就有表头、表位、源数据的选项。

image.png

但是客户是喜欢偷懒的,不想多点一步,直接默认导出的这种,并且还喜欢在表尾添加合计的功能,默认也是导出的。如下图:

image.png

image.png

现在的需求就是:在我默认导出的时候,导出的表格中不能出现表尾的内容。没认真看文档,然后使用columnFilterMethod是没用的,因为只针对列,肯定无效。

image.png

这时候demo里找不到,可以到API里找,如下图,isFooter设为false就ok,是不是很简单。

image.png

后来回头再看demo,发现也算有的,看到下图的isHeader和isFooter,其实就能猜到了。 image.png

image.png

4 总结

注意:这里的导出需要和后台配合,从后台获取,因为正常我们是有分页,加入直接使用getCheckboxRecords,只会得到页的内容,假如只是需要当前页的内容的,当我没说。比如这个导出需求,一般demo中是有的,假如demo找不到的时候,仔细找到的类似的案例,先猜在测试,还不行翻API,这两种办法不分先后。