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 相关文章推荐
基于jquery实现的表格分页实现代码
Jun 21 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
JavaScript数组排序小程序实现解析
Jan 13 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
PHP 编程安全性小结
2010/01/08 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
Python编程之序列操作实例详解
2017/07/22 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
用python写PDF转换器的实现
2020/10/29 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
初中语文教学反思
2014/02/02 职场文书
高三家长寄语
2014/04/03 职场文书
应届生自荐书
2014/06/23 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers