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 cookie解码函数(兼容ff)
Mar 17 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
js调试工具Console命令详解
Oct 21 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
javascript生成大小写字母
Jul 03 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 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
20个PHP常用类库小结
2011/09/11 PHP
基于php缓存的详解
2013/05/15 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
python中遍历文件的3个方法
2014/09/02 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python+mysql实现教务管理系统
2019/02/20 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
美丽的现代设计家具:2Modern
2018/07/26 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
试述DBMS的主要功能
2016/11/13 面试题
易程科技软件测试笔试
2013/03/24 面试题
创新型城市实施方案
2014/03/06 职场文书
学校火灾防控方案
2014/06/09 职场文书
小学生思想品德评语
2014/12/31 职场文书
2016国培学习心得体会
2016/01/08 职场文书
美元符号 $
2022/02/17 杂记