vue3实现通过根据时间选择器选中的月份动态渲染表头对应月份的数据

一、前言以及需求：

        本人前端菜鸟一个，以下内容如有不正确的地方望请各位大佬指点！首先说一下现在公司使用的框架是vue3+ant。

        在公司项目中碰到了一个比较有趣的需求：用户在选择对应的日期段段之后，表格动态列部分所展示的列名要与选择的月份相匹配，因为不管用户选择什么时间，后端所返回的数据为1-12月所有数据，而需求是只想展示对应选择的月份数据；例如：用户选择日期为：09-23-2023至12-30-2023，所包含的月份为9、10、11、12月，而动态列所展示的月的数据为：09月库存量、10月库存量、11月库存量、12月库存量。

二、实现思路及过程

       1.获取月份数组

        获取到选择器上选中的时间之后，使用splice方法对获取到的时间（格式为：mm-dd-yyyy）值进行分割，假设得到两个时间段的月份分别为start和end，我们需要的月份列表的数据格式为数组，那么就需要使用Array()方法对start、end两个变量进行加工，假如start=9，end=12，那么所有的月份个数为四个月，即12-9+1 = 4，“+1”是需要算上减数本身，此时得到的“4”仅仅为数组的长度，后面我们还需要使用fill()方法对该数组进行元素填充，具体操作如下：

const [date1, date2] = state.date1
    const start = Number(date1.split('/')[0])
    const end = Number(date2.split('/')[0])
    const y1 = Number(date1.split('/')[2])
    const y2 = Number(date2.split('/')[2])
    let num = Array()   // 声明月份数组

    if (start <= end && y1 === y2) {      //判断当前end是否大于start，并且是否是同一年，因为后端不支持此接口跨年查询数据
      Array(end - start + 1)
        .fill(0)
        .map((value, index) => {
          const month = start + index   // map循环数组后，每个元素都由start自加index，就实现了从start月开始一个一个累加1，如9，10，11，12
          const a = month < 10 ? `0${month}` : month  // 判断当月份小于“10”时，在数字前添加一个“0”，如：08、09
          num.push(a.toString()) // 将最后处理好的数据push进入月份数组中
        })
    } else {
      message.warning('不可进行跨年查询！')
    }

       2.循环追加列结构

        既然是动态地添加列，那就肯定需要先声明列的固定结构了（比如：标题、序列号、列宽等基本的列信息），同时还要规定要渲染列的白名单，即要循环的动态列名单（比如：数量、金额、占比等列名），然后再通过判断循环拿到的白名单值进行追加列名信息，最后在return的时候使用Object.assign()的方法对列结构对应的属性赋值。具体操作如下：

let addColumn = {    // 需要添加的列白名单
      qty: '',
      total: '',
      rate: '',
      seq_ratio_str: ''
    }

    const columnArr = num.map((item: any, index: any) => {   // 对num月份数组进行map循环
      return Object.entries(addColumn).map((value: any) => {  // 对白名单对象数组化，方便取值赋值和循环
        let name
        let column = {     // 固定列结构
          title: '',
          dataIndex: '',
          filterExpression: '',
          key: '',
          align: 'left',
          minWidth: 100,
          width: 150
        }

        // 对第二层循环中的value[0]判断，然后进行追加列名操作
        if (value[0] === 'qty')name = '使用量'
        else if (value[0] === 'total') name = '总额'
        else if (value[0] === 'rate') name = '完成百分比(%)'
        else if (value[0] === 'seq_ratio_str') name = '环比(增长/减少)值百分数'

        return Object.assign(    // 最后return的时候，对列结构对象进行赋值操作
          column,
          { title: `${item}月` + `${name}` },
          { dataIndex: `${value[0]}` + `${item}` }, // 因为后端返回的动态列数据字段的形式为qty01，qty02，total01，total02等，字段前的数字代表的是月份，各位可以根据自身情况来进行参考。
          { key: `${value[0]}` + `${item}` }
        )
      })
    })

         最后打印columnArr，得到的结果如下（因为数据过长，所以只展示9月份、10月份的返回值）：

        可以看到返回的结果是二维数组，所以在最后拼接上固定列对象的时候需要对columnArr进行扁平化操作，这样才能与state.columns的结构保持一致：

const state = reactive({
    columns: [      //固定列对象，是固定渲染的列部分，非动态列，可以看到存储列信息的数据结构是对象数组，数组内元素为对象。
        {
            xxx: xxx,
            yyy: yyy,
            aaa: aaa,
            bbb: bbb
        },
        {
            xxx: xxx,
            yyy: yyy,
            aaa: aaa,
            bbb: bbb
        },
        ...
    ]
})

//最后请求接口获取到数据后，将columnArr数组拼接到state.column中，请求方法已省略，只展示最后拼接部分的代码
Object.assign(state, { columns: state.columns.concat(columnArr.flat()) })

  三、结果展示

        

        最后，以上思路、代码有待优化的或者错误的，各位大佬可以私信或者在评论区发表自己的看法和意见，我虚心接受！