页面效果
后台返回的数据类型
代码语言：javascript复制'type': 'Bi,Ea',需要做的处理
后台返回的不同的字符串编号，每个编号对应不同的文字描述，比如说 Bi 对应消息推送应用。前端需要对后台返回的字符串做识别判断
代码语言：javascript复制 // template
// 模板中不能直接遍历后台返回的type属性，而是绑定和遍历处理过后的 newType 属性
<el-table-column prop="newType" label="应用类型" show-overflow-tooltip>
<template slot-scope="scope">
<span v-for="(item,index) in scope.row.newType" :key="index" class="app-type">{{ item.value }}</span>
</template>
</el-table-column>
// ========================================================================
// script
data() {
return {
searchData: {
appId: ''
},
tableData: [],
appType: [{
code: 'Bi',
value: '消息推送应用'
},
{
code: 'Pa',
value: '公众号应用'
},
{
code: 'Ga',
value: '群发应用'
},
{
code: 'Ea',
value: '移动ehome应用'
},
{
code: 'Ma',
value: '调用ModuleAuthorityService接口应用'
},
{
code: 'Ot',
value: 'others其他应用'
}]
}
},
methods: {
// 获取应用数据
async getAppInfo() {
const data = { ...this.searchData, ...this.page }
const response = await getAppInfo(data || null)
const { objRes } = response
this.tableData = objRes.records //赋值表格数据
this.tableData.forEach(item1 => { //遍历表格数据
item1.newType = [] //给表格每一行添加一个新的数组属性。用于存放解析后的编码和对应文字
const codeArr = item1.type.split(',') //把每一行的type属性通过split分解成一个数组 得到['Bi','Ea']
codeArr.forEach(item2 => { //遍历该数组
this.appType.forEach(item3 => { //遍历前端定义的appType
if (item2 === item3.code) { // 如果 item2 的编号和 item3的code属性相等
item1.newType.push({ //就把item2 的编号 和 item3的value 赋值给每一行的新增加item1属性
code: item2,
value: item3.value
})
}
})
})
})
}
}如果还有其他更好的方法，请路过的大佬们指点~
