element UI-表格数据转换

原创已于 2022-04-12 14:50:34 修改

· 3.1k 阅读

8 ·

版权

文章标签：

#前端

于 2022-04-12 14:20:06 首次发布

vue2.0 专栏收录该内容

42 篇文章

订阅专栏

本文探讨了如何避免表格数据在前端显示时被修改的问题，介绍了两种有效的方法：一是利用`formatter`函数保持原始数据，二是通过`slot-scope`实现数据的动态渲染。这两种方法有助于保留后台返回的`isenabled`原始值，提升数据交互的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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