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入门教程(11) js事件处理
Jan 31 Javascript
JS定时器实例
Apr 17 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
angularJS 入门基础
Feb 09 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
javascript 数组精简技巧小结
Feb 26 Javascript
js实现的订阅发布者模式简单示例
Mar 14 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网页后退不再出现过期
2007/03/08 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
Javascript Select操作大集合
2009/05/26 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
如何在存储过程中使用Loop
2016/01/05 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
建筑工程专业学生的自我评价
2013/12/25 职场文书
高校十八大报告感想
2014/01/27 职场文书
少先队入队活动方案
2014/02/08 职场文书
端午节活动策划方案
2014/03/09 职场文书
个人工作表现评价材料
2014/09/21 职场文书
布达拉宫导游词
2015/02/02 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书