需求：
1.第一列为正常列；
2.第二列开始为动态生成列（根据接口返回数据生成）；
3.最后一列为编辑列。
步骤：
写入动态html模板
<vxe-tableid="prdRequest-id"ref="clearSort-req"border:page="page":row-config="{ isHover: true }"v-bind="{height: tableHeight,sortConfig: {remote: true},showFooter: true,'show-overflow':true}"auto-resizealign="center"class="content-height mytable-scrollbar":data="tableData":footer-method="footerMethod"@sort-change="sortChange"><vxe-column title="日期" field="recordDate" width="120" sortable /><!---将多级表头循环遍历--><template v-for="(item, key) in TableColumns"><!---一级表头--><vxe-colgroup:key="item.label || key":title="item.label":width="item.width || 100"><!---二级表头--><template v-if="item.children"><vxe-columnv-for="(items, index) in item.children":key="index":title="items.label":field="items.prop"v-bind="{'show-overflow': true}"/></template></vxe-colgroup></template><vxe-column:width="200"type="html"title="操作"><template slot-scope="scope"><div class="table-reload"><span class="table-reload-examine" @click="(e) => handleEditRow(e, scope.row)">编辑</span></div></template></vxe-column></vxe-table>
核心js方法
centerProcess(response) {if (response.code === 200) {response.data.records.map(item => {// 动态生成colums（由于一级表头对应多个二级表头，而二级表头为三个固定重复表头，故加入index以保证prop唯一性）this.TableColumns = item.detail.map((v, index) => {return {label: v.sectionName,children: [{prop: 'receiveNum' + index,label: '领料数'},{prop: 'goodNum' + index,label: '良品数'},{prop: 'goodRate' + index,label: '良品率'}]}})})//合计行参数处理for (var i = 0; i < this.TableColumns.length; i++) {this.totalArr.push(...['receiveNum' + i, 'goodNum' + i])}// 将detail中三个数量处理为下标对应值（和表头处理类似）response.data.records.map((item, index) => {item.detail.map((v, i) => {item['receiveNum' + i] = v.receiveNumitem['goodNum' + i] = v.goodNumitem['goodRate' + i] = v.goodRate})})this.tableData = response.data.recordsthis.page.total = response.data.totalthis.loading = false} else {this.$message({message: response.message,type: 'error'})}}
response返回数据格式：
来看前端效果
非常nice！
