后端返回数据动态标题拼接静态标题，拼接数据

前两个标题是动态。后两个静态。最后一个是可编辑

1.首先看下后端返回数据结构、

data下一条数据里包含table标题跟一组数据。

<el-table :data="stockList" border style="width: 100%;">
                <el-table-column :prop="item.value" :label="item.name" v-for="(item,index) in tableColumnList" :key="index">    
                </el-table-column>
                <el-table-column label="增加可用库">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row"></el-input>
                    </template>
                </el-table-column>
            </el-table>

逻辑拼接

getCommodityState(val) {
                getCommodityState(val).then(res => {
                    console.info(res.data)
                    let stockList = res.data;
                    if(stockList.length){
                        this.tableColumnList = []
                        stockList[0].list.forEach(column=>{
                            this.tableColumnList.push({
                                name: column.formatName,
                                value: `formatKey${column.formatId}`
                            })
                        })
                        this.tableColumnList = [
                            ...this.tableColumnList,
                            ...this.defaultTableColumnList
                        ]
                    }
                    let formatStockList = []
                    stockList.forEach(item => {
                        let format = item
                        item.list.forEach(fmt=>{
                            format[`formatKey${fmt.formatId}`] = fmt.formatValue
                        })
                        delete format.list
                        formatStockList.push(format)
                    });
                    this.stockList = formatStockList
                }).catch(err => {
                    console.log(err)
                })
            }

1.新数组拼接标题，循环一次取出动态标题。拼接上静态写死标题
2.再拿参数对应ID作为标识拼接字符串。
3.取到数据删除渲染