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 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
原生JS实现音乐播放器
Jan 26 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横向重复区域显示二法
2008/09/25 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
Python操作SQLite简明教程
2014/07/10 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
如何真正的了解python装饰器
2020/08/14 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
日语专业毕业生求职信
2013/12/04 职场文书
函授毕业自我鉴定
2013/12/19 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
三八节标语
2014/06/27 职场文书
五五普法心得体会
2014/09/04 职场文书
关于教师节的广播稿
2014/09/10 职场文书
实习单位指导教师评语
2014/12/30 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
css背景和边框标签实例详解
2021/05/21 HTML / CSS
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技