vex-table根据时间加载列（动态加载），动态计算显示最后一行

vex-table根据时间加载列（动态加载），动态计算显示最后一行

效果

div部分

 <vxe-table
        ref="xTable"
        border
        show-footer
        show-overflow
        :loading="loading"
        :data="partData"
        :column-config="{ resizable: false }"
        :edit-config="{ showIcon: false, trigger: 'click', mode: 'cell' }"
        :footer-method="footerMethod"
        :row-config="{ isHover: true }"
        :export-config="{}"
        class="editable-footer"
      >
        <vxe-column type="seq" title="序号" width="50" fixed="left"></vxe-column>
        <vxe-column field="partname" title="部件名称" width="200" fixed="left">
          <template #edit="{ row }">
            <vxe-input v-model="row.partname" type="number" placeholder="请输入数值"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="detailqty" title="零件数" width="100" fixed="left">
          <template #edit="{ row }">
            <vxe-input v-model="row.detailqty" type="number" placeholder="请输入数值"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column v-for="item in columnList" :key="item.field" :field="item.field" :title="item.title" :edit-render="{}" min-width="100">
          <template #edit="{ row }">
            <vxe-input v-model="row[item.field]" type="number" placeholder="请输入"></vxe-input>
          </template>
        </vxe-column>
      </vxe-table>

TS部分

<script lang="ts">
import { defineComponent, reactive } from "vue";
export default defineComponent({
  setup() {
    return reactive({
      visible: false as boolean,
      loading: false as boolean,
      proPlan: {
        dateValue: [] as any
      } as any,
      columnList: [] as any,
      partData: [] as any,
    });
  },
  computed: {
    dataRule() {
      return {};
    }
  },
  methods: {
    footerMethod({ columns, data }: any) {
      return [
        columns.map((column: { property: string }, columnIndex: number) => {
          if (columnIndex === 0) {
            return "";
          }
          if (columnIndex === 1) {
            return "汇总";
          }
          if (!["partname"].includes(column.property)) {
            return this.sumNum(data, column.property);
          }
          return null;
        }),
        columns.map((column: { property: string }, columnIndex: number) => {
          if (columnIndex === 0) {
            return "";
          }
          if (columnIndex === 1) {
            return "人数";
          }
          if (!["partname"].includes(column.property)) {
            if (this.capDate.length > 0) {
              for (let i = 0; i < this.capDate.length; i++) {
                if (this.capDate[i].date.includes(column.property)) {
                  return this.sumPerson(data, column.property, Number(this.capDate[i].number));
                }
              }
            }
          }
          return null;
        })
      ];
    },
    sumNum(list: { [x: string]: any }[], field: string | number) {
      let count = 0;
      list.forEach((item: { [x: string]: any }) => {
        if (item[field]) {
          count += Number(item[field]);
        }
      });
      return count;
    },
    sumPerson(list: { [x: string]: any }[], field: string | number, num: number) {
      let count = 0;
      list.forEach((item: { [x: string]: any }) => {
        if (item[field]) {
          count += Number(item[field]);
        }
      });
      return Math.ceil(count / num);
    },
    /**
     * 根据时间加载列
     * @param val
     */
    changeDate(val: any) {
      this.getCapDate(val);
    },
    InitColumns(val: any) {
      let all = this.getAll(val[0], val[1]);
      this.columnList = reactive([]);
      for (let i = 0; i < all.length; i++) {
        let column = reactive({
          field: all[i],
          title: all[i]
        });
        this.columnList.push(column);
      }
      //排序
      this.columnList.sort(function (A: number, B: number) {
        return A - B;
      });
    },
    //根据时间加载 每一天时间
    getAll(start: any, end: any) {
      let dateList = [];
      let startTime = this.getDate(start);
      let endTime = this.getDate(end);

      while (endTime.getTime() - startTime.getTime() >= 0) {
        let year = startTime.getFullYear();
        let month = startTime.getMonth() + 1 < 10 ? "0" + (startTime.getMonth() + 1) : startTime.getMonth() + 1;
        let day = startTime.getDate().toString().length == 1 ? "0" + startTime.getDate() : startTime.getDate();
        dateList.push(year + "-" + month + "-" + day);
        startTime.setDate(startTime.getDate() + 1);
      }
      return dateList;
    },
    /**
     * 时间格式处理 2022-11-11
     * @param datestr
     */
    getDate(datestr: any) {
      let temp = datestr.split("-");
      let date = new Date(temp[0], temp[1] - 1, temp[2]);
      return date;
    },
  });  
</script>