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图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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 获取select下拉列表框的值
2010/05/08 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
学习python (2)
2006/10/31 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
flask-restful使用总结
2018/12/04 Python
python Canny边缘检测算法的实现
2020/04/24 Python
python如何进入交互模式
2020/07/06 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
丑小鸭教学反思
2014/02/03 职场文书
施工安全生产承诺书
2014/05/23 职场文书
个人借款协议书范本
2014/11/17 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
2016新年感言
2015/08/03 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
Python实现位图分割的效果
2021/11/20 Python