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


Posted in Javascript onMarch 02, 2018

组件中:

<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;">
  <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
  </el-table-column>
  <el-table-column prop="cz" label="操作" width="320">
     <template scope="scope">
       <el-button size="small" 
         @click="handleEdit(scope.$index, scope.row)">编辑
       </el-button>
       <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
         {{scope.row.status | formatStatus}}
       </el-button>
     </template>
   </el-table-column>
</el-table>

js中:

filters: {
   formatStatus: function (val) {
    console.log(val)
    return val == 1 ? '上架' : val == 2 ? '下架' : '未知';
  },
},
methods: {
//性别显示转换
  formatSex: function (row, column) {
    return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
  },
}

以上这篇Element-ui table中过滤条件变更表格内容的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
jQuery Ajax之load()方法
Oct 12 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 #Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 #Javascript
vue中添加mp3音频文件的方法
Mar 02 #Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 #Javascript
select标签设置默认选中的选项方法
Mar 02 #Javascript
原生JavaScript实现todolist功能
Mar 02 #Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 #Javascript
You might like
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
小程序转发探索示例
2019/02/19 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
python线程、进程和协程详解
2016/07/19 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python实现图片中文字分割效果
2019/07/22 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
建筑工程专业学生的自我评价
2013/12/25 职场文书
篝火晚会主持词
2014/03/25 职场文书
考试诚信承诺书
2014/05/23 职场文书
求职自我推荐信
2014/06/25 职场文书
作风建设年度心得体会
2014/10/29 职场文书
迎国庆主题班会
2015/08/17 职场文书
终止合同协议书范本
2016/03/22 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL
Oracle用户管理及赋权
2022/04/24 Oracle