iview表格Table表头动态化实现

朴灿烈づ我的快乐病毒、 2021-09-17 03:02 1523阅读 0赞

业务逻辑：根据日期，时间筛选跨度固定为3个月，获取数据，表格动态按月份展示，看图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]  
表格还是这么简单

思路：固定时间跨度监听解决不赘述，搜索获取数据后，对tableColumns，进行处理，（push,splice,uhshift…都可以）引起DOM刷新，  
处理tableColumns的函数  
this.$utils.time.formatTime为封装好的时间处理函数，moment.js

// 初始化表头
        columsInit () {
          let timeStr1 = this.$utils.time.formatTime(this.searchParams.sDate, 'YYYY-MM')
          let startMonth = timeStr1 + '月维护企业数'
          let timeStr2 = this.$utils.time.formatAddTime(this.searchParams.sDate, 'YYYY-MM', 1, 'months')
          let midMonth = timeStr2 + '月维护企业数'
          let timeStr3 = this.$utils.time.formatTime(this.searchParams.eDate, 'YYYY-MM')
          let endMonth = timeStr3 + '月维护企业数'
          this.tableColumns.splice(3, 4,
            {
              title: startMonth,
              align: 'center',
              render: (h, params) => {
              //下面业务逻辑直接不用看
                // console.log(timeStr1)
             /*   let arr = params.row.historyDataListDto || [];
                let obj = null
                arr.forEach((item, index) => { //有些人员，有些月份的数据没有
                  if (item.month == timeStr1) {
                    obj = arr[index]
                  }
                })
                if (obj) {
                  return h('a', {
                    on: {
                      click: () => {
                        this.toDetail(params.row.uId, params.row.class2Id, obj.month, obj.month, obj.dirId)
                      }
                    }
                  }, obj.whsNum)
                } else {
                  return h('span', '--')
                }
             */业务逻辑
              }
            },
            {
              title: midMonth,
              align: 'center',
              render: (h, params) => {
              
              }
            },
            {
              title: endMonth,
              align: 'center',
              render: (h, params) => {
                
              }
            },
            {
              title: '平均',
              align: 'center',
              key: 'avgNum'
            }
          )
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210813/ee1043637beb4154a93192271a2e2655.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]: /images/20210813/3ed1bb3c8b5449d980c8aa9c2261a8ef.png