element-ui表格数据转换的示例代码

作者:包子源 时间:2023-07-02 17:00:23 

业务场景:在后台管理系统表格模块中,我们请求回来的数据类似性别等等,后台给我们返的不是男,或者女,而是给我们返回的是0和1,或者是A和B;但是怎么在表格中显示成男和女呢,这里就需要用到数据转换 formatter属性

具体代码如下:


<el-table
:data="tableData"
highlight-current-row
style="width: 100%">
<el-table-column
 prop="name"
 label="姓名">
<el-table-column
 prop="authority"
  :formatter="formatRole"
 label="角色">
</el-table-column>
</el-table>

js部分代码:


methods: {
 //角色转换
 formatRole: function(row, column) {
  return row.authority == 'ROLE_REGISTRAR' ? "教务主任" : row.authority == 'ROLE_GRADE_DIRECTOR' ? "年级主任" : "班主任";
 }
}

参数row就是表格当前行的所有数据

当然我们还可以用来截字符串啊,什么的,方法自己定义,return对应的值就行了

来源:https://blog.csdn.net/ziwoods/article/details/79021429

标签:element-ui,表格,数据转换
0
投稿

猜你喜欢

  • 全面了解django的缓存机制及使用方法

    2023-07-22 09:51:58
  • thinkPHP删除前弹出确认框的简单实现方法

    2024-06-07 15:28:58
  • Python数据结构之列表与元组详解

    2022-05-30 00:39:04
  • asp实现的查询某关键词在MSSQL数据库位置的代码

    2011-02-28 11:18:00
  • 根据时段自动切换你的站点CSS皮肤风格

    2007-09-20 18:08:00
  • 区别JavaScript函数声明与变量声明

    2024-04-18 09:34:42
  • pytorch获取vgg16-feature层输出的例子

    2021-04-16 20:56:47
  • MySQL8数据库安装及SQL语句详解

    2024-01-17 21:25:33
  • 使用PHP批量生成随机用户名

    2023-07-22 13:10:10
  • vscode检测到#include错误请更新includePath的解决方法

    2022-10-14 22:58:04
  • Python练习之操作MySQL数据库

    2024-01-20 12:29:22
  • Python while true实现爬虫定时任务

    2021-02-10 13:35:30
  • 简单了解django文件下载方式

    2022-10-31 08:48:32
  • windows环境中利用celery实现简单任务队列过程解析

    2023-08-09 12:15:28
  • JavaScript高级程序设计 阅读笔记(十七) js事件

    2024-04-19 09:55:17
  • python BlockingScheduler定时任务及其他方式的实现

    2022-02-13 17:32:25
  • Python-OpenCV基本操作方法详解

    2021-11-25 20:40:01
  • 基于mpvue的小程序项目搭建的步骤

    2024-05-13 09:12:13
  • 详解JDBC对Mysql utf8mb4字符集的处理

    2024-01-14 12:01:43
  • 安装sql server 2008 management提示已安装 SQL Server 2005 Express的解决方法

    2024-01-15 12:49:03
  • asp之家 网络编程 m.aspxhome.com