vue+element动态表头的写法（二）

这里的表头和数据还是分开的，和上一篇不一样的是，这里的表头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  href="javascript:void(0)" @click.stop="openEditDialog(props.row,props.$index)">修改</a>
            <a  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"
        }
    ]

Tags 标签

加个好友，技术交流