关于前端:vueelement动态表头的写法二

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

vue+element 动静表头的写法（一）