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


Posted in Javascript onAugust 24, 2018

业务场景:在后台管理系统表格模块中,我们请求回来的数据类似性别等等,后台给我们返的不是男,或者女,而是给我们返回的是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对应的值就行了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
详解Vue之事件处理
Jul 10 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 #Javascript
vuejs 动态添加input框的实例讲解
Aug 24 #Javascript
vue.js input框之间赋值方法
Aug 24 #Javascript
react build 后打包发布总结
Aug 24 #Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 #Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 #Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 #Javascript
You might like
Sony CFR 320 修复改造
2020/03/14 无线电
PHP扩展CURL的用法详解
2014/06/20 PHP
php判断当前操作系统类型
2015/10/28 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python在Console下显示文本进度条的方法
2016/02/14 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python查询IP地址归属完整代码
2017/06/21 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
康拓普公司Java笔面试
2016/09/23 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
电子专业推荐信范文
2013/11/18 职场文书
售后服务承诺书范文
2014/03/26 职场文书
2014年三万活动总结
2014/04/26 职场文书
推广活动策划方案
2014/08/23 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
mysql脏页是什么
2021/07/26 MySQL
Linux安装Docker详细教程
2022/07/07 Servers