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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Element-ui table中过滤条件变更表格内容的方法

    组件中: <el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;"> <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sorta

  • element-ui表格列金额显示两位小数的方法

    对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值 和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 定义过滤器 filters: { rounding (value) { return value.toFixed(2) } } toFixed() 方法可把 Number 四舍五入为指定小数位数的数字,使用语法如下: NumberObject.t

  • vue+element-ui+ajax实现一个表格的实例

    实例如下: <!DOCTYPE html> <html> <head> <script src="js/jquery-3.2.1.js"></script> <script src="vue.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.co

  • vue中element-ui表格缩略图悬浮放大功能的实例代码

    vue中element-ui表格缩略图悬浮放大功能的实例代码

    element-ui界面非常简洁和美观,提供的组件可以满足绝大多数的应用场景,当表格中显示了图片的缩略图时,想要鼠标浮动在缩略图上时放大图片的效果,该如何实现呢?element-ui虽然没有直接提供图片悬浮放大的组件,但是可以使用Popover弹出框组件,一样实现效果,如下: 具体的代码(此处只是图片单元格的代码,其它代码省略): <el-table-column prop="picture" header-align="center" align="

  • element-ui 表格实现单元格可编辑的示例

    如下所示: <template> <el-table :data="tableData" border @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseOut" style="width: 100%"> <el-table-column label="日期" width="180&q

  • 利用vue和element-ui设置表格内容分页的实例

    html代码 因为我写在template中,也就是新建了组建中,贴出代码. <el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"> </el-pagination> 代码中,small代表是否使用小型分页样式 layout代表组件布局,子组件名用逗号分隔 属性: total代表总条目数

  • vue element-ui table表格滚动加载方法

    添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.

  • Vue+element-ui 实现表格的分页功能示例

    Vue+element-ui 实现表格的分页功能示例

    本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下: 实现效果如下图所示: template部分: <el-table :data="tempList" :header-cell-style="rowClass" stripe border style="margin-bottom:14px;" :empty-text="emptyText"> <el-table-colum

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

    业务场景:在后台管理系统表格模块中,我们请求回来的数据类似性别等等,后台给我们返的不是男,或者女,而是给我们返回的是0和1,或者是A和B:但是怎么在表格中显示成男和女呢,这里就需要用到数据转换 formatter属性 具体代码如下: <el-table :data="tableData" highlight-current-row style="width: 100%"> <el-table-column prop="name"

  • element ui 表格动态列显示空白bug 修复方法

    在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是一旦表格列减少时就会出问题,对element底层代码进行调试发现,在node_modules/element-ui/lib/elementui.common.js 中的一个函数. removeColumn: function removeColumn(states, column) { var _c

  • element ui表格实现下拉筛选功能

    element ui表格实现下拉筛选功能

    本文实例为大家分享了element ui表格实现下拉筛选的具体代码,供大家参考,具体内容如下 1.default-sort中prop传入要排序的字段(接口返回或自己定义的数据).order代表排序,这里用到降序 2.filters对象中text代表页面中显示的筛选文字,value代表筛选用到的值,在方法中filterHandler用到 3.column 的 key,如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件(绑定的是要对接口中排序的字段) 4

  • 关于element ui 表格中的常见特殊属性说明

    关于element ui 表格中的常见特殊属性说明

    目录 1,表格内容太多用…表示 2,修改element ui自带的样式 3,修改奇数行背景色 4,给表头添加背景色及文字样式 5,表头文字竖向排列(文字带括号) 6,表头边框与文本边框对不齐情况 7,导航栏的侧边栏只展开一个下拉菜单 8,表格表头和内容居中显示 9,添加表格背景色 10,鼠标移入表格高亮显示当前行 element ui 表格的常见特殊属性 1,表格内容太多用...表示2,修改element ui自带的样式3,修改奇数行背景色4,给表头添加背景色及文字样式5,表头文字竖向排列(文字

  • Python3读取和写入excel表格数据的示例代码

    python操作excel主要用到 xlrd 和 xlwt 这两个库,xlrd读取excel表格数据, 支持 xlsx和xls格式的excel表格 :xlwt写入excel表格数据: 一.python读取excel表格数据 1.读取excel表格数据常用操作 import xlrd # 打开excel表格 data_excel=xlrd.open_workbook('data/dataset.xlsx') # 获取所有sheet名称 names=data_excel.sheet_names()

  • vue基于Element构建自定义树的示例代码

    vue基于Element构建自定义树的示例代码

    说明 做项目的时候要使用到一个自定义的树形控件来构建表格树,在github上搜了一下没有搜索到合适的(好看的)可以直接用的,查看Element的组件说明时发现它的Tree控件可以使用render来自定义节点样式,于是基于它封装了一个可以增.删.改的树形组件,现在分享一下它的使用与实现. 控件演示 github上挂的gif可能会比较卡,有没有大佬知道还有哪里可以挂静态资源的,谢谢..! 控件使用 概要 基于element-ui树形控件的二次封装 提供编辑.删除节点的接口 提供一个next钩子,在业

  • JS调用页面表格导出excel示例代码

    使用JS方法调用页面表格导出excel有很大的限制: 1.目前试了几个浏览器,只有IE支持, 2.点击 工具---安全---自定义级别---ActiveX 相关选项启用 下面是html代码 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()

  • Ajax方式删除表格一行数据示例代码

    复制代码 代码如下: /** * Ajax方式删除信息--后台数据 * * action * id 主键值 * obj 删除行的<a> */ function removeRow(action,id,obj){ if(confirm('确定要删除吗?')){ Ext.Ajax.request({ url : encodeURI("alone.portal?.f=${namespace}&.pmn=view&action="+action), params :

  • Vue+Element switch组件的使用示例代码详解

    Vue+Element switch组件的使用示例代码详解

    代码如下所示: <el-table-column label="商品状态" align="center"> <template slot-scope="{row}"> <el-switch v-model="row.goods_state" class="switch" :active-value="1" :inactive-value="0&qu

  • element ui table（表格）实现点击一行展开功能

    element ui table（表格）实现点击一行展开功能

    前言 element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击右箭头可以展开,我们的很多需求是点击某一行展开 那是不是无法实现呢?其实,借助element ui的一些属性,轻松实现点击某行展开,我们还是用2.0.9版本官网的例子, 对齐改造,使之可以做到这点 <template> <el-table :data="tableData5&

随机推荐