1. 环境

vue 2.6.12
vxe-table 3.3.8

2. 自定义列排序

列排序的时候，降序的时候null值排在最前面，升序null值排在最后面。这是不符合常理的。所以使用自定义列排序方法。
即sort-config中的sortMethod。
用的方法比较原始，先把null值的行过滤出来，然后根据根据升序降序添加到结果数组数组中。
需要注意的是，数字和字符串应该分别排序。

    <vxe-table:sort-config="{trigger: 'cell',orders: ['desc', 'asc', null],sortMethod: customSortMethod}"><vxe-table-columnsortable></vxe-table-column></vxe-table>

customSortMethod({ data, column, property, order }) {let data1 = data.filter((item)=>{return item[column.property] === undefined})let data2 = data.filter((item)=>{return item[column.property] !== undefined})let tmpData = []if(order === 'desc') {tmpData =  data2.sort((a,b)=>{if(util.typeOf(a[column.property]) === 'number'){return b[column.property] - a[column.property]}else{return b[column.property].localeCompare(a[column.property]);}}).concat(data1)}if(order === 'asc'){tmpData =  data1.concat(data2.sort((a,b)=>{if(util.typeOf(a[column.property]) === 'number'){return a[column.property] - b[column.property]}else{return a[column.property].localeCompare(b[column.property]);}}))}return tmpData;}

3. 使用vxe-toolbar自定义导出按钮

<vxe-toolbar ref="xToolbar1"><template #tools><Button shape="circle" icon="md-download" @click="excelExport">导出</Button></template>
</vxe-toolbar>
<vxe-table>
</vxe-table>

excelExport() {// 前端导出方法
}

需要注意的是，使用自定义导出的时候，前端页面是排序的，但是导出的文件还是原顺序。
为了解决这个问题，另外定义一个数组用来保存排序后的数据。伪代码如下：

data(){return{tableData:[],excelData:[]}
},
mounted:{this.initData()
},
methods:{initData(){// axios 获取数据this.tableData = resultArraythis.excelData = resultArray},// 上文中提到的自定义排序方法customSortMethod({ data, column, property, order }) {// ..... 自定义排序方法this.excelData = tmpData  return tmpData;}
}

4. 使用div/span循环产生列时，列顺序异常

异常的表现有两个：

表中既有循环产生的列，又有非循环产生的列（序号列），序号列顺序异常，命名定义的时候在前面，展示在后面。
嵌套列vxe-table-colgroup 中的child列顺序异常
大概如下图:

错误代码：

        <span v-for="(item,index) in frontColumn":key="item.key"><vxe-table-column:field="item.key":title="item.title"></vxe-table-column></span>

正确代码：应该直接在column上循环

<vxe-table-columnv-for="(item,index) in frontColumn":key="item.key":field="item.key":title="item.title">
</vxe-table-column>

这是个低级错误，事后反思了很久。读api文档要心细些。

君子慎独，不欺暗室。

Vxe Table一些简单的应用和踩坑记录相关推荐

关于C++ Qt项目实现最简单Http Server的踩坑记录
前言在开发Qt项目中,需要实现一个Http服务器功能,接收并处理客户端的http请求,Qt的发行版中并没有提供相应的类来处理,所以要实现该功能只能找其他开源项目了,本文主要记录我在收集相关资料过程中 ...
mysql 使用sum limit_mysql踩坑记录之limit和sum函数混合使用问题
问题复盘本次复盘会用一个很简单的订单表作为示例. 数据准备订单表建表语句如下(这里偷懒了,使用了自增ID,实际开发中不建议使用自增ID作为订单ID) CREATE TABLE `order` ( ...
日常踩坑记录-汇总版
开发踩坑记录,不定时更新心得 RTFM 严谨的去思考问题,处理问题严格要求自己的代码编写习惯与风格注意单词拼写 20200207 mybatis plus 自带insert插入异常 sql i ...
TVM: Deep Learning模型的优化编译器(强烈推荐, 附踩坑记录)
本文作者是阿莱克西斯,原载于知乎,雷锋网(公众号:雷锋网)获得授权转载. (前排提醒,本文的人文内容部分稍稍带有艺术加工,请保持一定的幽默感进行阅读) 关注我最近想法的同学应该知道我最近都在把玩 TV ...
SpringBoot踩坑记录 Invalid bound statement (not found)引发的一些列问题
SpringBoot踩坑记录 Invalid bound statement (not found)引发的一些列问题当你开开心心搭建了一个SpringBoot项目,用插件生成了entity.dao. ...
sonar覆盖率怎么统计的_实战|Java 测试覆盖率 Jacoco插桩的不同形式总结和踩坑记录(上）...
本文为霍格沃兹测试学院优秀学员关于 Jacoco 的小结和踩坑记录.测试开发进阶学习,文末加群. 一.概述测试覆盖率是老生常谈的话题.因为我测试理论基础不是很好,这里就不提需求.覆盖率等内容,直奔主 ...
配合Opencv2.4.9，CMake3.12.1和VS2010在win10下构建项目踩坑记录
配合Opencv3,CMake和VS2010在win10下构建项目踩坑记录参考https://blog.csdn.net/qq_26623659/article/details/78322782 博 ...
mvn exec: java_实战|Java 测试覆盖率 Jacoco插桩的不同形式总结和踩坑记录(下）
本文为霍格沃兹测试学院优秀学员关于 Jacoco 的小结和踩坑记录.测试开发进阶学习,文末加群. 六.注意事项汇总修改 JAVA_OPTS 参数时,如果位置不对,可能造成代理无法启动. java - ...
mybatis学习与踩坑记录
mybatis resultmap高级映射应用场景:如果sql查询的列名和pojo的属性名不一致,可以使用resultMap将列名和pojo的属性名作一个对应关系,就可以映射成功了.(如果返回值为i ...

Vxe Table一些简单的应用和踩坑记录

文章目录

1. 环境

2. 自定义列排序

3. 使用vxe-toolbar自定义导出按钮

4. 使用div/span循环产生列时，列顺序异常

Vxe Table一些简单的应用和踩坑记录相关推荐

最新文章

热门文章