需求:el-table表格数据由字符代号转文字,不用写固定一个个转文字,可以使用find来适配
关键点:
① 先定义一个数组存储字符和文字的对应关系
alertTypeData:[
{label:"事件1",value:'1'},
{label:"事件2",value:'2'},
{label:"事件3",value:'3'},
{label:"事件4",value:'4'},
{label:"事件5",value:'5'},
{label:"事件6",value:'6'},
]
② find遍历查找
<el-table class="tableCon" :data="zkSwitchList" style="width: 100%; border:1px solid #d1dee8;border-bottom:0;" :height="tableHeight" ref="table" v-loading="tableLoading">
<el-table-column label="发布类型" prop="alertType" show-overflow-tooltip>
//template 转换
<template slot-scope="scope">
//1、先v-if查找接口返回的当前行数据scope.row.alertType有没有和定义好的alertTypeData有对应关系
<span v-if="
alertTypeData.find(
(item) => item.value === '' + scope.row.alertType)
"
>
//2、v-if找到对应关系后,取出该条数据,用{{}}展示label文字
{{
alertTypeData.find(
(item) => item.value === '' + scope.row.alertType
).label
}}
</span>
<span v-else>-</span>
</template>
</el-table-column>
</el-table>