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随笔(js图片切换效果)
Jul 31 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
基于JavaScript 实现拖放功能
Sep 12 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
关于时间计算的结总
2006/12/06 PHP
php实现aes加密类分享
2014/02/16 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
深入理解vue Render函数
2017/07/19 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
python适合人工智能的理由和优势
2019/06/28 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
什么是python的必选参数
2020/06/21 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
用python实现学生管理系统
2020/07/24 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
《忆江南》教学反思
2014/04/07 职场文书
学校欢迎标语
2014/06/18 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
校运会加油稿大全
2015/07/22 职场文书