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解析XML的实现代码
Nov 12 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
jquery自适应布局的简单实例
May 28 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 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随机生成数字字母组合的方法
2015/03/18 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
JS实现密码框效果
2020/09/10 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
Python中property函数用法实例分析
2018/06/04 Python
Django实现分页功能
2018/07/02 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
展会邀请函范文
2014/01/26 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
故宫导游词
2015/01/31 职场文书
高中家长意见怎么写
2015/06/03 职场文书
烈士陵园观后感
2015/06/08 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python