场景:
table表格返回的数据,1表示启用,0表示停用。不处理就是像下图这样
那如何处理呢?以前我是对后端返回的数据直接进行遍历处理,像这样:
async getTableList(){
let res = await queryPtUserListByPage(this.tableParams)
res.data.list.forEach(item =>{
item.isenabled = item.isenabled== '1'?'启用':'停用'
})
},
但这个的弊端在与,点击操作栏获取这一行数据的时候,isenabled 就不是原始后台返回的数据,而是被修改过了。这样对于下拉的数据非常不友好。
但后来发现有下面这些方法
第一种方法:
使用formatter方法
html:
<el-table-column prop="isenabled" label="状态" :formatter="tableFormat"/>
methods里面:
//表格内容格式转换
tableFormat(row, column, cellValue, index){
// 该函数一共有4个入参,分别是行、列、当前字段值、行下标
// console.log(row, column, cellValue, index)
return row.isenabled == '1'?'启用':'停用'
},
第二种方法:
通过 slot-scope="scope"
<el-table-column label="状态">
<template slot-scope="scope">
<span>{
{ scope.row.isenabled == '1'?'启用' :'停用'}}</span>
</template>
</el-table-column>