element UI-表格数据转换

场景:
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>

猜你喜欢

转载自blog.csdn.net/qq_39928481/article/details/124122797