vex-table 实现 自定义表格表头&& 自定义 表头分组

因为最近项目的特殊性 最近有这样一个需求 在表格中需要按照客户需要
生成不固定的日期 并获取到 这些日期里的数据
一开始因为不太懂客户的需求 已经对页面逻辑的错误理解 算是走了不少弯路
话不多说直接 上实现效果 大致效果是这样的
vex-table 实现 自定义表格表头&& 自定义 表头分组_第1张图片
用过vxe-table 的都知道 实现表头分组其实并不难 比如我用 vxe-grid表格
写法 如下图 只需要 在对应表头对象下加上一个children 就行了
vex-table 实现 自定义表格表头&& 自定义 表头分组_第2张图片
可是看上去很简单 但事实上 在实际开发的时候往往 并不是像你想的那么简单 比如说 表头字段名是不断变化的 而且需要显示的天数往往不是固定的 如果用普通的写法往往很难实现
这个时候像就要自己想办法了 我的解决逻辑是 可以将生产的这一段日期单独来做 最后将这段自己生成表头与之前的表头合并即可
实现逻辑如下
第一步 首先根据客户需求 获取 对应的天数 根据天数获取到对应日期的数据 ,比如获取从今天开始 到 往后一个星期的数据 将这一个星期的数据存储起来 ,第二步将生成的日期循环 即可获取 到对应日期表头配置
vex-table 实现 自定义表格表头&& 自定义 表头分组_第3张图片
如上图 this.howlong 就是对应的天数 而this.dateArr里存储的就是表头需要的日期
而重点是childen中存放的是对应分组的子分组 因为数据要求的问题
后端返回的数据往往都是一个数组集合 我们们每个日期所对应数据就在这个数组的对象里,如果想取到 我们需要的值 实现方法如下
vex-table 实现 自定义表格表头&& 自定义 表头分组_第4张图片
这样分组的逻辑基本上就实现完了
最后一步 将两个数组合并
在这里插入图片描述
这样我们就能实现表头分组并获取到 对应的值了

你可能感兴趣的:(vxe-table,vue)