ant desgin vue table动态循环生成表格

场景： 根据选择日期年月份进行动态往表格添加数项

话不多说，下面直接上代码

一、html代码

<!-- 表格 -->
<div class="admin_table_list">
    <a-spin tip="Loading..." :spinning="spinning">
        <a-table bordered size="small" 
                 :rowkey="id" 
                 :components="components" 
                 :columns="columns"
                 :data-source="orderList" 
                 :pagination="false" 
                 :scroll="{x:750 | true, y: 440 }">
        </a-table>
    </a-spin>
</div>

二、js代码

// 点击查询按钮
getQuery() {
	this.spinning = true
    var Columns = this.columns = [{
        title: '序号',
        dataIndex: 'xuhao',
        width: 50,
        fixed: 'left',
        align: 'center'
    },
    {
        title: '备货单位/客户类型',
        dataIndex: 'customer',
        width: 180,
        ellipsis: true,
        align: 'center',
    },
    {
        title: '存货编码',
        dataIndex: 'inventoryNumber',
        width: 180,
        ellipsis: true,
        align: 'center',
    },
    {
        title: '存货名称',
        dataIndex: 'inventoryName',
        width: 180,
        ellipsis: true,
        align: 'center',
     },
     {
         title: '规格',
         dataIndex: 'specifications',
         width: 180,
         ellipsis: true,
         align: 'center',
     },
     {
         title: '主计量',
         dataIndex: 'measurement',
         width: 180,
         ellipsis: true,
         align: 'center',
     }];
    let columns = [{
        title: '备货/订单数量',
        dataIndex: 'plan',
    },
    {
        title: '发货数量',
        dataIndex: 'ship',
    },
    {
        title: '出库数量',
        dataIndex: 'out',
    },
    {
        title: '退货数量',
        dataIndex: 'back',
    },
    {
        title: '退库数量',
        dataIndex: 'red',
    }]
    
    // 获取表单数据
    for (var i = Number(this.beginmonth); i<=Number(this.endmonth); i++) {
        let time = this.beginyears + (i < 10? "0"+ i : i)
        //动态循环添加表头
        Columns.push({
            title: this.beginyears + '年' + i + '月',
            align: "center",
            dataIndex: 'result',
            key: 'result',
            //动态匹配表头项对应值
            children: columns?.map(el => ({
            	...el,
            	key: el?.dataIndex,
            	width: 120,
            	align: "center",
            	customRender: (text, record) => {
                    return record.result[time][el?.dataIndex] ?? 0
                  }
        	}))
    	})
     }
     this.form.validateFields((err, values) => {
         this.page = 1;
         this.pageSize = 10;
         this.getcgList(...)}) //请求表格列表
         //添加合计
     	 Columns.push({
         	title: '合计',
         	align: 'center',
         	dataIndex: 'result',
         	key: 'result',
            //动态循环匹配合计数值
         	children: columns?.map(el => ({
         		...el,
         		key: el?.dataIndex,
         		width: 120,
         		align: "center",
         		customRender: (text, record) => {
             		return record.result['heji'][el?.dataIndex]
           		}
     	  	}))
      	})       

	}

有什么不懂，欢迎留言，一起相互学习探讨技术交流！