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加密解密7种方法总结分析
Oct 07 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 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的日期与时间函数技巧
2008/04/24 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
python 简单的多线程链接实现代码
2016/08/28 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
python与pycharm有何区别
2020/07/01 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
用python对oracle进行简单性能测试
2020/12/05 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
清扬洗发水广告词
2014/03/14 职场文书
党员创先争优承诺书
2014/03/26 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
第一军规观后感
2015/06/12 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers