vue+element-ui怎么使用v-for生成table-column,根据特殊返回特殊处理
前端定义表头及针对后端API返回的数据做特殊处理:
// 前端定义表头
tableKey: [
{
label: '集中隔离类型名称',
width: '',
align: 'center',
prop: 'centralizedIsolationName'
},
{
label: '居家监测类型名称',
width: '',
align: 'center',
prop: 'homeMonitoringName'
},
{
label: '使用范围',
width: '',
align: 'center',
prop: 'scopeOfUse',
render: ({ scopeOfUse }) => { return `<div>${scopeOfUse === 3 ? '集中隔离<br>居家监测' : scopeOfUse === 1 ? '集中隔离' : '居家监测'}</div>` }
},
{
label: '启用状态',
width: '',
align: 'center',
prop: 'isStatus',
render: ({ isStatus }) => { return `<div>${isStatus === true ? '启用' : '停用'}</div>` }
},
{
label: '创建时间',
width: '',
align: 'center',
prop: 'gmtCreate'
}
]
// 前端循环处理表格
<el-table-column
v-for="(item, index) in tableKey"
:key="index"
:label="item.label"
:width="item.width"
:align="item.align"
>
<template slot-scope="scope">
<div
v-if="item.render"
v-html="item.render(scope.row)"
/>
<div
v-else
v-text="scope.row[item.prop]"
/>
</template>
</el-table-column>
后端返回的数据格式:
[
{
"centralizedIsolationName": "集中隔离",
"gmtCreate": "2022-04-12 10:23:57",
"homeMonitoringName": "",
"id": 1,
"isStatus": true,
"scopeOfUse": 1
},
{
"centralizedIsolationName": "集中隔离12",
"gmtCreate": "2022-04-12 10:49:58",
"homeMonitoringName": "",
"id": 8,
"isStatus": true,
"scopeOfUse": 1
},
{
"centralizedIsolationName": "黄码重点人员(黄码人员中可能暴露的重点人员、潜在密切接触者)",
"gmtCreate": "2022-04-12 15:05:05",
"homeMonitoringName": "黄码重点人员",
"id": 9,
"isStatus": true,
"scopeOfUse": 3
}
]
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
评论已关闭