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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
Add a Formatted Table to a Word Document
Jun 15 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
angular2使用简单介绍
Mar 01 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
微信小程序支付前端源码
Aug 29 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 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
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
js正确获取元素样式详解
2009/08/07 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
蓝颜请假条
2014/04/11 职场文书
一体化教学实施方案
2014/05/10 职场文书
小学老师对学生的评语
2014/12/29 职场文书
预备党员群众意见
2015/06/01 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
Python绘制分类图的方法
2021/04/20 Python
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
golang连接MySQl使用sqlx库
2022/04/14 Golang
Python如何加载模型并查看网络
2022/07/15 Python
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers