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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 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
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
JS实现复制功能
2017/03/01 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
学习Django知识点分享
2019/09/11 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
涉密人员保密承诺书
2014/05/28 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
爱晚亭导游词
2015/02/09 职场文书
财务稽核岗位职责
2015/04/13 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python