vue 过滤器使用的传参说明

在table中,需要对obj的数据类型进行文字转换,例如后台接口返回的姓别值:1,2。其中需要页面根据字典需要把1=》男,2=》女进行转换。

以前的习惯是每一个过滤方法都写一个方法进行转换,例如:

  页面代码:

 <el-table-column width="200px"align="left" label="性别"><template slot-scope="scope"><span>{{scope.row.sex | filterSex }}</span></template>
</el-table-column>    

其中,过滤器方法: 

 

 

后面发现只需要写一个过滤器即可,需要传入需要转换的值,以及用于获取转换的字典项的vuex的getter即可。

错误写法:

以下的错误写法,发现我在filterSex方法中接收到的数据都是sex的value值,而接收不到sexGetter的值。

 <el-table-column width="200px"align="left" label="性别"><template slot-scope="scope"><span>{{scope.row.sex | filterFieldFun(scope.row.sex, 'sexGetter') }}</span>
</template> </el-table-column>

  

原因:

  经过查看官网,https://cn.vuejs.org/v2/guide/filters.html得知:需要过滤的值不需要再过滤器方法中传递,在接收的时候,已经默认方法值第一个参数就是需要过滤的值。因此正确写法是:

 <el-table-column width="200px"align="left" label="性别"><template slot-scope="scope"><span>{{scope.row.sex | filterFieldFun('sexGetter') }}</span>
</template> </el-table-column>

  这样方法接收到scope.row.sex的值和‘sexGetter'

 

 

  关于过滤器的官网截图说明:

 

转载于:https://www.cnblogs.com/luoxuemei/p/9952356.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364943.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ruby sinatra mysql_一分钟开始持续集成之旅系列之:Ruby + Sinatra 应用

前言现代软件工程越来越复杂&#xff0c;而开发效率随着软件复杂度增加呈指数型下降。为在提高开发效率的同时也能保证质量&#xff0c;越来越多团队开始践行敏捷开发方法。持续集成是敏捷开发的重要实践之一。它倡导团队通过自动化构建工具频繁地验证软件可用性&#xff0c;从…

C++语言实现-邻接表

图的邻接表实现 邻接表是图的一种链式存储结构。主要是应对于邻接矩阵在顶点多边少的时候&#xff0c;浪费空间的问题。它的方法就是声明两个结构。如下图所示&#xff1a; 先来看看伪代码&#xff1a; typedef char Vertextype; //表结点结构 struct ArcNode { int adjvex; …

使用Lucene的新FreeTextSuggester查找长尾建议

Lucene的“ 建议”模块提供了许多有趣的自动建议实现&#xff0c;以便在用户将每个字符输入搜索框时为他们提供实时搜索建议。 例如&#xff0c; WFSTCompletionLookup将所有建议及其权重编译到一个紧凑的有限状态传感器中 &#xff0c;从而可以对基本建议进行快速前缀查找。 …

mysql 查看锁表日志_MYSQL 表锁情况查看

查看锁表情况mysql> show status like ‘Table%’;—————————-——–| Variable_name | Value |—————————-——–| Table_locks_immediate | 795505 || Table_locks_waited | 0 || Table_open_cache_hits | 0 || Table_open_cache_misses | 0 || Table_ope…

Java,Scala,Guava和Trove集合-它们可以容纳多少数据?

关于我们的数据结构&#xff0c;令人着迷的事情之一是&#xff0c;即使我们对它们非常熟悉&#xff0c;我们仍然很难说出像HashMap这样基本的东西在1GB的内存中可以容纳多少个项目。 我们可能会在学校&#xff0c;高级开发人员那里学到这一点&#xff0c;或者由于数据结构选择不…

switch 失效

switch 开关失效无法切换&#xff0c;可以关闭&#xff0c;无法开启。 发现问题点 require-table.js 中toggle value的数据类型不是 number 导致 &#xff08;value ? no : yes )判断总为no&#xff1b; 前面将value 强制转换为number类型即可 转载于:https://www.cnblogs.c…

纯php socket mysql_PHP 连接 unix_socket MySQL

当MySQL使用Unix Socket启动时&#xff0c;直接使用localhost会发生了一个数据库错误&#xff0c;发生无法连接数据库错误。 Warning: mysql_connect() [function.mysql-connect]: [2002] 这时应当修改hostname&#xff0c;例如在CI 配置数据库 (database.php) 从&#xff1a; …

mysql为什么不能插入数据_mysql为啥不能插入数据

mysql为何不能插入数据&#xff1f;安装AppServ后首次使用mysql&#xff0c;没有图形界面&#xff0c;在“MySql Command Line Client”的操作如下&#xff1a;mysql> create database cars;Query OK, 1 row affected (0.00 sec)mysql> use cars;Database changedmysql&g…

mocha 测试 mysql_e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDrive

e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step 二 图片验证码的识别 &#xff0c; 下面讲一下Node.js中如何访问数据库&#xff0c; 在做自动化测试过程中&#xff0c; 经常可能遇到需要到数据库取值&#xff0c;或是…

在Window上使用Jenkins自动发布Java工件

这篇文章将展示如何使用Jenkins Continuous Integration自动执行Java Web应用程序&#xff08;使用MYSQL DB和基于Hibernate ORM在基于REST的Jersey2 Spring环境中开发的学生申请应用程序&#xff09;的发布过程-上载发布工件到发布存储库。 如上一篇文章在Windows上使用Jenkin…

Python开发【第六篇】:模块

Python开发【第六篇】&#xff1a;模块 模块&#xff0c;用一砣代码实现了某个功能的代码集合。 类似于函数式编程和面向过程编程&#xff0c;函数式编程则完成一个功能&#xff0c;其他代码用来调用即可&#xff0c;提供了代码的重用性和代码间的耦合。而对于一个复杂的功能来…

在jsp文件中通过超链接访问servlet_Eclipse中创建Servlet

1.新建test1.jsp文件&#xff0c;输入如下代码代码解释&#xff1a;一个超链接&#xff0c;跳转到forwardServlet注意forwardServlet 这里是个Servlet2.在工程中新建Servlet3.输入Class名称&#xff0c;注意下边的Supper Class 它自动继承了HttpServlet选择next4.Create Servle…

C# 多线程学习系列四之ThreadPool取消、超时子线程操作以及ManualResetEvent和AutoResetEvent信号量的使用...

1、简介 虽然ThreadPool、Thread能开启子线程将一些任务交给子线程去承担,但是很多时候,因为某种原因,比如子线程发生异常、或者子线程的业务逻辑不符合我们的预期,那么这个时候我们必须关闭它,而不是让它继续执行,消耗资源.让CPU不在把时间和资源花在没有意义的代码上. 2、主线…

Oracle学习:新建表空间

1. 以 sysdba 身份登入Oracle sqlplus / as sysdba; 2. 创建表空间 create tablespace (空间名)fwptfs (数据文件存放路径)datafile D:\xxx (初始大小)size 500m (自动扩容&#xff0c;每次200m)autoextend on next 200m; 3. 创建用户 create user (用户名)fwptfs…

tomcat7使用dbcp连接池遇到的坑

项目部署在tomcat后每隔一段时间便会报错 Cause: java.sql.SQLException: Could not retrieve transation read-only status server ; SQL []; Could not retrieve transation read-only status server; nested exception is java.sql.SQLException: Could not retrieve transa…

纯CSS实现3D照片墙

HTML部分&#xff1a; <body><div class"photo-wrap"> <!-- 舞台 --><div class"container"> <!-- 容器 --><div class"img">我是中心</div><div class"img img01"><img src&q…

Guava之RangeMap

在Guava官方API上面可以得知&#xff1a;RangeMap是一种集合类型( collection type)&#xff0c;它将不相交、且不为空的Range&#xff08;key&#xff09;映射给一个值&#xff08;Value&#xff09;。和RangeSet不一样&#xff0c;RangeMap不可以将相邻的区间合并&#xff0c…

CSS3新增的伪类选择器

伪类选择器的作用&#xff1a;对已有选择器做进一步的限制&#xff0c;对已有选择器能匹配的元素做进一步的过滤。CSS 3提供的伪类选择器主要分为以下三类&#xff1a; 结构性伪类选择器UI元素状态伪类选择器其他伪类选择器 1、结构性伪类选择器 Selector:root&#xff1a;匹…

签名SOAP消息–生成封装的XML签名

数字签名是使数字内容真实可信的一种广泛使用的机制。 通过为某些内容生成数字签名&#xff0c;我们可以让另一方能够验证该内容。 通过此验证&#xff0c;它可以保证在我们签名后不会更改。 通过这个示例&#xff0c;我将分享如何为SOAP信封生成签名。 但是&#xff0c;这当然…

2019 The 19th Zhejiang University Programming Contest

感想&#xff1a; 今天三个人的状态比昨天计院校赛的状态要好很多&#xff0c;然而三个人都慢热体质导致签到题wa了很多发。最后虽然跟大家题数一样(6题)&#xff0c;然而输在罚时。 只能说&#xff0c;水题还是刷得少&#xff0c;看到签到都没灵感实在不应该。 题目链接&#…