el-table动态表格（表头和表格内容都是数组对象接口方式渲染）
el-table动态渲染表格
·
<el-table style="margin-top: 12px" :header-cell-style="{'background-color': '#337AB7','color':'#ffffff'}"
ref="tableSort" v-loading="listLoading"
:border="border" :data="list.markTbValueSvTaskNodeVoList"
:height="height" :size="lineHeight" :stripe="stripe"
@selection-change="setSelectRows">
<!--1 表格头数组（动态表头）-->
<el-table-column align="center" v-for="(item2, index2) in list.tbFieldList" :key="item2.id.toString()"
:property="item2.id.toString()" :label="item2.name"><!--表头label数组-->
<!--2 表格体数组(动态表体)-->
<template slot-scope="scope">
{{formatDataMethod(scope.row.tbValueList,item2.id)}}<!--tbvaluelist：表格一行单元格数组、item2.id：表头label的ID-->
<!--<div v-for="(item, p_index) in list.markTbValueSvTaskNodeVoList" :key="p_index">-->
<!--<div v-for="(itemb ) in item.tbValueList"><!–表格内容value数组–>-->
<!--<span v-if="(itemb.tbFieldId)===(list.tbFieldList[index2].id)"> <!–当前头的id === 列对应的父ID–>-->
<!--{{(itemb.value)}}-->
<!--</span>-->
<!--</div>-->
<!--</div>-->
</template>
</el-table-column>
<!--3 公共的字段（固定表头+表体）-->
<el-table-column
label="流程阶段"
width="180">
<template slot-scope="scope">
{{scope.row.svTaskNodeDto.nodeName}}
</template>
</el-table-column>
<el-table-column
label="创建时间"
width="180">
<template slot-scope="scope">
{{scope.row.tbValuePub.createTime.substring(0,10)}}
</template>
</el-table-column>
<el-table-column
align="center"
label="操作"
show-overflow-tooltip
width="120"
>
<template #default="{ row }">
<el-button type="text" @click="queryDetailIsShow=true">查看</el-button>
</template>
</el-table-column>
<template #empty>
<el-image
class="vab-data-empty"
:src="require('@/assets/empty_images/data_empty.png')"
/>
</template>
</el-table>
methods: {
formatDataMethod(columnArray,labelId){
for(let a=0;a<columnArray.length;a++){
if(columnArray[a].tbFieldId===labelId){
return columnArray[a].value;
}
}
},
}
const res =
{
"code": 200,
"msg": null,
"data": {
"total": 2,
"records": {
"tbTable": {
"createBy": "",
"createTime": "2022-05-15 23:30:04",
"updateBy": "",
"updateTime": "2022-05-16 09:44:12",
"deleted": 0,
"remark": "string",
"id": 1525861075613278209,
"name": "区局实效督察",
"tbTypeId": 1525860700046909441,
"tbType": {
"createBy": "",
"createTime": "2022-05-15 23:28:34",
"updateBy": "",
"updateTime": "2022-05-15 23:28:34",
"deleted": 0,
"remark": "string",
"id": 1525860700046909441,
"name": "网上督察"
},
"processDefinitionId": "未定义:16:d5698e05-dc03-11ec-9afd-4ed577b80fb9"
},
"tbFieldList": [
{
"createBy": "",
"createTime": "2022-05-16 14:24:19",
"updateBy": "",
"updateTime": "2022-05-16 14:24:19",
"deleted": 0,
"remark": "",
"id": 1526086121770401793,
"name": "督察Guid",
"code": "GUID",
"required": 1,
"indexed": 1,
"type": 1,
"showed": 1,
"tableId": 1525861075613278209,
"dicTypeId": null
},
{
"createBy": "",
"createTime": "2022-05-16 14:28:44",
"updateBy": "",
"updateTime": "2022-05-16 14:28:44",
"deleted": 0,
"remark": "",
"id": 1526087232057196545,
"name": "区局",
"code": "DisOrgan",
"required": 1,
"indexed": 2,
"type": 17,
"showed": 1,
"tableId": 1525861075613278209,
"dicTypeId": null
},
{
"createBy": "",
"createTime": "2022-05-16 14:29:46",
"updateBy": "",
"updateTime": "2022-05-16 14:29:46",
"deleted": 0,
"remark": "",
"id": 1526087494117310466,
"name": "督察日期",
"code": "InSpecialDay",
"required": 1,
"indexed": 3,
"type": 8,
"showed": 1,
"tableId": 1525861075613278209,
"dicTypeId": null
},
{
"createBy": "",
"createTime": "2022-05-16 14:30:24",
"updateBy": "",
"updateTime": "2022-05-16 14:30:24",
"deleted": 0,
"remark": "",
"id": 1526087653790269442,
"name": "出动人员",
"code": "OutStaffs",
"required": 1,
"indexed": 4,
"type": 15,
"showed": 1,
"tableId": 1525861075613278209,
"dicTypeId": null
},
{
"createBy": "",
"createTime": "2022-05-16 14:31:12",
"updateBy": "",
"updateTime": "2022-05-16 14:31:12",
"deleted": 0,
"remark": "",
"id": 1526087856211574786,
"name": "道路（门牌号）",
"code": "RoadNumber",
"required": 1,
"indexed": 5,
"type": 1,
"showed": 1,
"tableId": 1525861075613278209,
"dicTypeId": null
},
{
"createBy": "",
"createTime": "2022-05-16 14:31:58",
"updateBy": "",
"updateTime": "2022-05-16 14:31:58",
"deleted": 0,
"remark": "",
"id": 1526088045756366849,
"name": "道路类型",
"code": "RoadType",
"required": 1,
"indexed": 6,
"type": 4,
"showed": 1,
"tableId": 1525861075613278209,
"dicTypeId": null
},
{
"createBy": "",
"createTime": "2022-05-16 14:33:12",
"updateBy": "",
"updateTime": "2022-05-16 14:33:12",
"deleted": 0,
"remark": "",
"id": 1526088357221187586,
"name": "督察大类",
"code": "DL_Kind",
"required": 1,
"indexed": 8,
"type": 18,
"showed": 1,
"tableId": 1525861075613278209,
"dicTypeId": null
},
{
"createBy": "",
"createTime": "2022-05-16 14:33:33",
"updateBy": "",
"updateTime": "2022-05-16 14:33:33",
"deleted": 0,
"remark": "",
"id": 1526088444466905090,
"name": "督察小类",
"code": "XL_Kind",
"required": 1,
"indexed": 9,
"type": 18,
"showed": 1,
"tableId": 1525861075613278209,
"dicTypeId": null
},
{
"createBy": "",
"createTime": "2022-05-16 14:34:20",
"updateBy": "",
"updateTime": "2022-05-16 14:34:20",
"deleted": 0,
"remark": "",
"id": 1526088641456586754,
"name": "问题描述",
"code": "Content",
"required": 1,
"indexed": 10,
"type": 1,
"showed": 1,
"tableId": 1525861075613278209,
"dicTypeId": null
},
{
"createBy": "",
"createTime": "2022-05-16 14:34:52",
"updateBy": "",
"updateTime": "2022-05-16 14:34:52",
"deleted": 0,
"remark": "",
"id": 1526088776399929346,
"name": "问题照片",
"code": "FJ",
"required": 1,
"indexed": 11,
"type": 6,
"showed": 1,
"tableId": 1525861075613278209,
"dicTypeId": null
},
{
"createBy": "",
"createTime": "2022-05-16 14:35:21",
"updateBy": "",
"updateTime": "2022-05-16 14:35:21",
"deleted": 0,
"remark": "",
"id": 1526088897292353537,
"name": "备注",
"code": "BZ",
"required": 1,
"indexed": 12,
"type": 1,
"showed": 1,
"tableId": 1525861075613278209,
"dicTypeId": null
},
{
"createBy": "",
"createTime": "2022-05-16 14:36:02",
"updateBy": "",
"updateTime": "2022-05-16 14:36:02",
"deleted": 0,
"remark": "",
"id": 1526089071641182209,
"name": "五边",
"code": "FiveSide",
"required": 1,
"indexed": 7,
"type": 17,
"showed": 1,
"tableId": 1525861075613278209,
"dicTypeId": null
}
],//表头数组
"markTbValueSvTaskNodeVoList": [
{
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbValueList": [
{
"id": 1531445197274492930,
"value": "开始---我是1组督察值",
"tbFieldId": 1526086121770401793,
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531445197295464449,
"value": "我是1组区局值",
"tbFieldId": 1526087232057196545,
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531445197308047361,
"value": "我是1组督察日期值",
"tbFieldId": 1526087494117310466,
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531445197312241665,
"value": "我是1组出动人员值",
"tbFieldId": 1526087653790269442,
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531445197324824578,
"value": "我是1组道路门牌值",
"tbFieldId": 1526087856211574786,
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531445197324824579,
"value": "我是1组道路类型值",
"tbFieldId": 1526088045756366849,
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531445197324824580,
"value": "我是1组督察大类值",
"tbFieldId": 1526088357221187586,
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531445197324824581,
"value": "我是1组督察小类值",
"tbFieldId": 1526088444466905090,
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531445197337407490,
"value": "我是1组问题描述值",
"tbFieldId": 1526088641456586754,
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531445197337407491,
"value": "我是1组问题照片值",
"tbFieldId": 1526088776399929346,
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531445197337407492,
"value": "我是1组备注值",
"tbFieldId": 1526088897292353537,
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531445197345796098,
"value": "我是1组五边值",
"tbFieldId": 1526089071641182209,
"mark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"tbField": null
}
],
"tbValuePub": {
"id": 1531445251452317697,
"createTime": "2022-05-31 09:19:35",
"createBy": "admin",
"updateTime": "2022-05-31 09:19:35",
"updateBy": "admin",
"deleted": 0,
"tbValueMark": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"tbTableId": 1525861075613278209,
"flowAccomplish": "-1",
"flowMark": "bb2957d2-e07f-11ec-835a-0c8bfde448c8"
},
"svTaskNodeDto": {
"processDefinitionId": "未定义:16:d5698e05-dc03-11ec-9afd-4ed577b80fb9",
"nodeName": "区局督察开单/区级督察派单",
"taskId": "bb45444c-e07f-11ec-835a-0c8bfde448c8",
"formKeys": "75ef80ba-d74b-46bc-ba1d-037623551519",
"createDate": "2022-05-31 09:19:34",
"dueDate": "2022-05-31 11:19:33",
"businessKey": "c49a762e-0597-46df-9af1-e3bf8477d0af",
"nodeId": "sid-2EE380AB-A916-4DD0-B54D-44B4B166A197"
}
},
{
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbValueList": [
{
"id": 1531211476122398721,
"value": "开始---我是2组督察值",
"tbFieldId": 1526086121770401793,
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531211476172730369,
"value": "我是2组区局值",
"tbFieldId": 1526087232057196545,
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531211476172730370,
"value": "我是2组督察日期值",
"tbFieldId": 1526087494117310466,
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531211476172730371,
"value": "我是2组出动人员值",
"tbFieldId": 1526087653790269442,
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531211476181118978,
"value": "我是2组道路门牌值",
"tbFieldId": 1526087856211574786,
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531211476189507585,
"value": "我是2组道路类型值",
"tbFieldId": 1526088045756366849,
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531211476189507586,
"value": "我是2组督察大类值",
"tbFieldId": 1526088357221187586,
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531211476189507587,
"value": "我是2组督察小类值",
"tbFieldId": 1526088444466905090,
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531211476202090497,
"value": "我是2组问题描述值",
"tbFieldId": 1526088641456586754,
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531211476202090498,
"value": "我是2组问题照片值",
"tbFieldId": 1526088776399929346,
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531211476202090499,
"value": "我是2组备注值",
"tbFieldId": 1526088897292353537,
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"tbField": null
},
{
"id": 1531211476210479105,
"value": "我是2组五边值",
"tbFieldId": 1526089071641182209,
"mark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"tbField": null
}
],
"tbValuePub": {
"id": 1531211579855925249,
"createTime": "2022-05-30 17:51:03",
"createBy": "admin",
"updateTime": "2022-05-30 17:51:04",
"updateBy": "admin",
"deleted": 0,
"tbValueMark": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"tbTableId": 1525861075613278209,
"flowAccomplish": "-1",
"flowMark": "03886447-dffe-11ec-a51b-0c8bfde448c8"
},
"svTaskNodeDto": {
"processDefinitionId": "未定义:16:d5698e05-dc03-11ec-9afd-4ed577b80fb9",
"nodeName": "区局督察开单/区级督察派单",
"taskId": "03e74d31-dffe-11ec-a51b-0c8bfde448c8",
"formKeys": "75ef80ba-d74b-46bc-ba1d-037623551519",
"createDate": "2022-05-30 17:51:01",
"dueDate": "2022-05-30 19:50:53",
"businessKey": "8b56223f-f2b7-4fe2-8ef7-49dc04b33aed",
"nodeId": "sid-2EE380AB-A916-4DD0-B54D-44B4B166A197"
}
}
]//表格内容
},
"pageSize": 20,
"currentPage": 1
}
}
this.list = res.data.records;
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
5
0- 0
已为社区贡献3条内容
所有评论(0)