el-table动态增减列（记录一下~）

<el-table :data="dailyPlanData" 
    :height="tableHeight"
    ref="dailyPlanTable"
    border
    style="width:100%; height:100% fontSize:12px;marginTop:50px;"
    :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}">
    <el-table-column label="序号" prop="index" width="50" show-overflow-tooltip/>
    <el-table-column label="任务数量" prop="qtyPlan"/>
    <el-table-column label="产品编码" prop="proCode" show-overflow-tooltip/>
    <el-table-column label="产品名称" prop="proName" show-overflow-tooltip/>
    <!--根据后端数据渲染多级表头(！！！重点)-->
    <el-table-column v-for="(col,index) in cols" :key="index" :prop="col.prop" :label="col.label">
        <el-table-column label="当日计划"  width="70">
            <template slot-scope="scope">
            <!--outputSrc是后端返回的一个数组，qtyPlan为数组里的属性，完工数量同理 -->
                {{scope.row.outputSrc[index].qtyPlan}}
            </template>
        </el-table-column>
        <el-table-column label="完工数量" width="70">
            <template slot-scope="scope">
                {{scope.row.outputSrc[index].qtyOutput}}
            </template>
        </el-table-column>
    </el-table-column>
</el-table>

处理逻辑

1.data里的数据

data(){
    return{
        dailyPlanData:[], // 表格数据
            cols:[
                // {prop:'list0',label:"第一列"},
                // {prop:'list1',label:"第二列"},
            ],//动态增加列的表头数据
            screenHeight:"",//屏幕高度
            tableHeight:"", //表格高度
    }
}

2.方法

created(){
        window.addEventListener('resize', this.getSeren)
        this.getSeren()
    },
methods:{
        //获取屏幕及表格高度(表格高度按实际情况计算)
        getSeren(){
            this.screenHeight = window.innerHeight;
            this.tableHeight = (this.screenHeight-150);
        },

        // 查询
        queryForDailyPlan(){
            let startDate = this.value1[0];
            let endDate = this.value1[1];
            let createStartDate = this.value2[0];
            let createEndDate = this.value2[1];
            // console.log(createStartDate+","+createEndDate);
            this.$axios.post("api/MESAPI/Report/GetDailyPlanAndOutput",{
                fromPlan:startDate,
                toPlan:endDate,
                factory:this.plant,
                lineCode:this.proClassLine,
                teamName:this.proTeam,
                taskNo:this.taskCode,
                fromTask:createStartDate,
                toTask:createEndDate
            }).then(res=>{
                // console.log(res);
                if(res.data.code == 200){
                    this.dailyPlanData = res.data.data;
                    for(let i = 0 ; i < this.dailyPlanData.length;i++){
                        this.listDate = this.dailyPlanData[i].outputSrc;
                    }
                    // 循环有多少要增加的列
                    let arr = [];
                    for(let i=0; i< this.listDate.length;i++){
                        //存储二级表头中第一行的日期数据
                        arr.push({prop:'list'+i,label:this.listDate[i].day})
                    }
                    this.cols = arr;
                    // 解决动态增加列后，表格高度变化问题，对表格进行重加载
                    this.$nextTick(() => {
                        this.$refs.dailyPlanTable.doLayout();
                        // el-table添加ref="dailyPlanTable"
                    });
                }else{
                    alert(res.data.msg)
                }
            })
        }
    }