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 相关文章推荐
Javascript模块模式分析
May 16 Javascript
javascript 简练的几个函数
Aug 29 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
js实现动态显示时间效果
Mar 06 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
详解JavaScript数据类型和判断方法
Sep 04 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
fgetcvs在linux的问题
2012/01/15 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
php实现映射操作实例详解
2019/10/02 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
jQuery链使用指南
2015/01/20 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
django如何连接已存在数据的数据库
2018/08/14 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Python是什么 Python的用处
2020/05/26 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
十佳少先队员演讲稿
2014/09/12 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
2015年服务员工作总结
2015/04/08 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server