这里的表头和数据还是离开的，和上一篇不一样的是，这里的表头 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"
}
]