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

这里的表头和数据还是分开的，和上一篇不一样的是，这里的表头headerData的属性和数据bodyData里的属性值是对应关系，但是优势在于前端人员不需要再对bodyData进行处理，直接绑定到table上就可以
【JS】vue+element动态表头的写法（二）

<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动态表头的写法（一）

以上是 【JS】vue+element动态表头的写法（二） 的全部内容， 来源链接： utcz.com/a/94002.html

回到顶部