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,一经查实,立即删除!

相关文章

leetcode 970. 强整数(Powerful Integers)

目录 题目描述&#xff1a;示例 1&#xff1a;示例 2&#xff1a;解法&#xff1a;题目描述&#xff1a; 给定两个正整数 x 和 y&#xff0c;如果某一整数等于 x^i y^j&#xff0c;其中整数 i > 0 且 j > 0&#xff0c;那么我们认为该整数是一个强整数。 返回值小于或等…

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

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

Java 8:在新的Nashorn JS引擎中编译Lambda表达式

在最近的一篇文章中&#xff0c;我了解了Java 8和Scala如何实现Lambda表达式。 众所周知&#xff0c;Java 8不仅引入了对Javac编译器的改进&#xff0c;而且还引入了全新的解决方案-Nashorn。 这个新引擎旨在替代Java现有JavaScript解释器Rhino。 这为我们带来了JVM的前列&…

vue 组件开发

作者QQ&#xff1a;1095737364 QQ群&#xff1a;123300273 欢迎加入&#xff01;1.新建路由:router-->index.js,修改成下面的代码 import Vue from vueimport Router from vue-routerimport index from /components/index/indexVue.use(Router)export default new Ro…

sql中有一些保留字,当你的字段名是它的保留字时,这个时候sql语句的字段不加``就会报错...

sql中有一些保留字&#xff0c;当你的字段名是它的保留字时&#xff0c;这个时候sql语句的字段不加就会报错转载于:https://www.cnblogs.com/w123w/p/10673692.html

C++语言实现-邻接表

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

为了适应云数据库mySQL产品_为了适应不同的应用场景,云数据库mysql版提供的产品系列包括哪些...

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…

TestNG:在一个测试类中使用@DataProvider依次运行测试

许多Java开发人员和自动化测试工程师在他们的工作中都使用TestNG作为测试框架。 我也不例外。 这是一个显而易见的选择&#xff0c;因为TestNG提供了非常强大的工具集&#xff0c;使处理各种测试变得更加容易。 为了证明这一点&#xff0c;我将在本文中向您展示如何解决一项不平…

mysql 数据库读取_教你如何从 MySQL 数据库读取数据

PHP MySQL 读取数据从 MySQL 数据库读取数据SELECT 语句用于从数据表中读取数据:SELECT column_name(s) FROM table_name我们可以使用 * 号来读取所有数据表中的字段&#xff1a;SELECT * FROM table_name如需学习更多关于 SQL 的知识&#xff0c;请访问我们的 SQL 教程。使用 …

GXC 钱包部署

参考: [ 官方 wiki ] 基于 Ubuntu 的 GXC 部署 基础环境 OS: Ubuntugxc: 官方 [ release 最新版本 ]下载 release 包(ubuntu) cd /usr/src wget https://github.com/gxchain/gxb-core/releases/download/v1.0.181106b/gxb_ubuntu_1.0.1801106.tar.gz 拷贝可执行命令到系统 /usr…

js-js的全局变量和局部变量

*** 全局变量&#xff1a;在script标签里面定义一个变量&#xff0c;这个变量在页面中js部分都可以使用   - 在方法外部使用&#xff0c;在方法内部使用&#xff0c;在另外一个script标签中使用 *** 局部变量&#xff1a;在方法内部定义一个变量&#xff0c;只能在方法内部调…

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

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

Java属性中指定Json的属性名称(序列化和反序列化)

序列化对象&#xff0c;只需要使用注解"JsonProperty(value "pwd")" import com.fasterxml.jackson.annotation.JsonProperty;public class User{JsonProperty(value "pwd")private String password; } 比如上面例子&#xff0c;在作为请求接…

网站表单输入框去除浏览器默认样式

网页不可避免的使用到表单&#xff0c;提交一些内容到后端&#xff0c;进行前后端交互。可是由于浏览器总是有各自的默认样式&#xff0c;所以需要对其进行清除。总的来说有以下几种&#xff1a; 1、input输入框获取焦点的时候&#xff0c;默认带蓝色边框&#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…

js-原始类型和声明变量

** Java的基本数据类型&#xff1a;byte、short、int、long、float、double、char、boolean ** 定义变量 都是用关键字 var(ES6中可以使用const和let来定义变量&#xff0c;后面会有ES6的语法介绍) ** js的原始类型&#xff08;5个&#xff09; - string&#xff1a;字符串  …

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

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

spoj1026 favorite dice

1 #include <bits/stdc.h>2 using namespace std;3 int n,t;4 const int N 1200;5 double dp[N];6 /*7 甩一个n面的骰子&#xff0c;问每一面都被甩到的需要甩的次数期望是多少。8 dp[i]&#xff1a;已经甩到i个面了&#xff0c;要达到n个面还需要次数的期望9 显然dp[…

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; …