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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
FF IE兼容性的修改小结
Sep 02 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
JavaScript代码实现简单计算器
Dec 27 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
星际原理概述
2020/03/04 星际争霸
如何使用PHP中的字符串函数
2006/10/09 PHP
与数据库连接
2006/10/09 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
python 写的一个爬虫程序源码
2016/02/28 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
详解Python self 参数
2019/08/30 Python
Python如何定义有可选参数的元类
2020/07/31 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
预备党员政审材料
2014/02/04 职场文书
房地产端午节活动方案
2014/08/24 职场文书
先进典型事迹材料
2014/12/29 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL