vue 表格 vxe-table 实现根据选择年月来动态生成月份表头

vxe-table 实现根据选择年月来动态生成月份表头

查看官网：vxetable.cn
gitbub：github.com/x-extends/v…
gitee：gitee.com/x-extends/v…

实现效果就是选日期后，根据当前年份生成月份对应的列，再请求接口加载数据

<template>
  <div>
    <vxe-date-picker v-model="selectYear" type="year"></vxe-date-picker>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import XEUtils from 'xe-utils'

const selectYear = ref('2024-01-01')

const gridOptions = reactive({
  border: true,
  loading: false,
  height: 500,
  columns: [],
  data: []
})

// 模拟接口数据
const loadList = (size) => {
  gridOptions.loading = true
  setTimeout(() => {
    const tableData = []
    if (selectYear.value) {
      const currYear = XEUtils.toDateString(selectYear.value, 'yyyy')
      for (let i = 0; i < size; i++) {
        const item = {}
        for (let j = 0; j < 12; j++) {
          const currMonth = XEUtils.padStart(`${j + 1}`, 2, '0')
          item[`${currYear}-${currMonth}`] = 'xx'
        }
        tableData.push(item)
      }
    }
    gridOptions.data = tableData
    gridOptions.loading = false
  }, 500)
}

const createColumns = () => {
  const columns = [
    { type: 'seq', width: 70 }
  ]
  if (selectYear.value) {
    const currYear = XEUtils.toDateString(selectYear.value, 'yyyy')
    const ymCols = []
    for (let i = 0; i < 12; i++) {
      const currMonth = XEUtils.padStart(`${i + 1}`, 2, '0')
      ymCols.push({
        title: `${currYear}-${currMonth}`,
        field: `${currYear}-${currMonth}`
      })
    }
    columns.push({
      title: `${currYear}`,
      children: ymCols
    })
  }
  gridOptions.columns = columns
  loadList(20)
}

watch(selectYear, () => {
  createColumns()
})

createColumns()
</script>

gitee.com/x-extends/v…