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 相关文章推荐
js 巧妙去除数组中的重复项
Jan 25 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
JS中的作用域链
Mar 01 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 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 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
javascript 的Document属性和方法集合
2010/01/25 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python中查看文件名和文件路径
2017/03/31 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python中的随机函数random的用法示例
2018/01/27 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
python字符串Intern机制详解
2019/07/01 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
地心历险记观后感
2015/06/15 职场文书
爱护环境建议书
2015/09/14 职场文书
医德医风学习心得体会
2016/01/25 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python