这里的表头和数据还是离开的，和上一篇不一样的是，这里的表头headerData的属性和数据bodyData里的属性值是对应关系，然而劣势在于前端人员不须要再对bodyData进行解决，间接绑定到table上就能够
<el-table :data="bodyData" @selection-change="rowSelect"> <el-table-column type="selection" width="45"></el-table-column> <el-table-column v-for="(item,index) in headerData" :key="index" :prop="item.FieldId" :label="item.FieldName"> </el-table-column> <el-table-column label="操作" fixed="right" width="100"> <template slot-scope="props"> <a class="table-btn" href="javascript:void(0)" @click.stop="openEditDialog(props.row,props.$index)">批改</a> <a class="table-btn" href="javascript:void(0)" @click.stop="deleteItem(props.row,props.$index)">删除</a> </template> </el-table-column></el-table>export default { data() { return { headerData:[], bodyData:[], } },}this.bodyData=[ { "ItemId": "6de78eb1-c4cc-4230-a7d7-66284a43d7b9", "94D6D990-3297-4429-9ADC-5931955B0273": "3是非得失1", "702E6A12-2D97-47C2-868C-8A3BFFC005D0": "胜多负少是范德萨产生的", "23CC25FE-61C8-40D4-92B2-DC92167E8886": "是非得失", "01DB8668-F554-4F8E-94C6-D775ACE3EE22": "谁发的", "2CD4BABF-E69E-4BC9-9772-193DB728F97E": "徐晓晨", "5788220E-1E4D-4784-B4CD-35CC33537B1B": "0", "5FDCEF38-12B7-4BE5-AC85-B48B0745F46B": "撒打发SV从新" }, { "ItemId": "219db66f-ec30-474c-abe7-46745e818c59", "94D6D990-3297-4429-9ADC-5931955B0273": "评审意见1231", "702E6A12-2D97-47C2-868C-8A3BFFC005D0": "评审意见回复", "23CC25FE-61C8-40D4-92B2-DC92167E8886": "办法离别巨匠", "01DB8668-F554-4F8E-94C6-D775ACE3EE22": "评估要求要求值", "2CD4BABF-E69E-4BC9-9772-193DB728F97E": "翻新项", "5788220E-1E4D-4784-B4CD-35CC33537B1B": "10", "5FDCEF38-12B7-4BE5-AC85-B48B0745F46B": "是的冯绍峰是" }, { "ItemId": "21ad165d-da38-4914-9d75-98fbd5b83d70", "94D6D990-3297-4429-9ADC-5931955B0273": "132", "702E6A12-2D97-47C2-868C-8A3BFFC005D0": "撒打发是沙发沙发上", "23CC25FE-61C8-40D4-92B2-DC92167E8886": "23胜多负少2", "01DB8668-F554-4F8E-94C6-D775ACE3EE22": "胜多负少", "2CD4BABF-E69E-4BC9-9772-193DB728F97E": "胜多负少", "5788220E-1E4D-4784-B4CD-35CC33537B1B": "11", "5FDCEF38-12B7-4BE5-AC85-B48B0745F46B": "是非得失" } ]this.headerData=[ { "FieldId": "94D6D990-3297-4429-9ADC-5931955B0273", "FieldName": "篇章", "FieldValue": null, "IsRequired": true, "Type": 1, "RowIndex": 10, "CreateDate": "2020/12/18 10:38:08", "Remark": "", "FieldType": "Input" }, { "FieldId": "702E6A12-2D97-47C2-868C-8A3BFFC005D0", "FieldName": "类别", "FieldValue": null, "IsRequired": true, "Type": 1, "RowIndex": 20, "CreateDate": "2020/12/18 10:38:08", "Remark": "", "FieldType": "Input" }, { "FieldId": "23CC25FE-61C8-40D4-92B2-DC92167E8886", "FieldName": "图纸", "FieldValue": null, "IsRequired": true, "Type": 1, "RowIndex": 30, "CreateDate": "2020/12/18 10:38:08", "Remark": "", "FieldType": "Input" }, { "FieldId": "01DB8668-F554-4F8E-94C6-D775ACE3EE22", "FieldName": "评估要求", "FieldValue": null, "IsRequired": true, "Type": 1, "RowIndex": 40, "CreateDate": "2020/12/18 10:38:08", "Remark": "", "FieldType": "TextArea" }, { "FieldId": "2CD4BABF-E69E-4BC9-9772-193DB728F97E", "FieldName": "问题形容", "FieldValue": null, "IsRequired": true, "Type": 1, "RowIndex": 50, "CreateDate": "2020/12/18 10:38:08", "Remark": "", "FieldType": "Input" }, { "FieldId": "5788220E-1E4D-4784-B4CD-35CC33537B1B", "FieldName": "分值", "FieldValue": null, "IsRequired": true, "Type": 1, "RowIndex": 60, "CreateDate": "2020/12/18 10:38:08", "Remark": "", "FieldType": "Input" }, { "FieldId": "5FDCEF38-12B7-4BE5-AC85-B48B0745F46B", "FieldName": "条文阐明", "FieldValue": null, "IsRequired": true, "Type": 1, "RowIndex": 70, "CreateDate": "2020/12/18 10:38:08", "Remark": "", "FieldType": "Input" } ]