Vue filter 过滤器、以及在table中的使用介绍


Posted in Javascript onSeptember 07, 2020

使用方法:

// 双花括号中
{{ isActive | isActiveFitlter}}

// 在v-bind 中
<div v-bind:id=" isActive | isActiveFitlter"></div>

一、组件中定义本地 Filter

filters:{
  isActiveFitlter : (value)=>{
     return value===1?'激活':'冻结'
  }
}

二、创建Vue实例前定义全局过滤器

Vue.filter('isActiveFitlter', (value)=>{
   return value === 1?'激活':'冻结'
})
new Vue({
 // ...
})

三、全局 Filter

1、自定义一个js文件,可以放在common文件夹中

//filters.js
let isActiveFitlter = value => {
  return value===1?'激活':'冻结'
}
export { isActiveFitlter }

2、main.js 引入 filters.js

import * as filters from './assets/common/filters'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

3、组件中使用

<span> {{ isActive | isActiveFitlter }} </span>

注意:

在table中使用需要借助 插槽

<el-table-column prop="isActive" label="状态">
   <template slot-scope="scope">
     {{scope.row.isActive | isActiveFitlter}}
   </template>
</el-table-column>

补充知识:vue 过滤数组数据,用于控制 el-table 某一行是否显示

场景:第一次查出来的数据用list接收。然后我第二次要用到list里面的数据,但是我想过滤掉选中的某一条用户的信息,这个时候就使用 filter 函数对list 进行 过滤。很简单,做个笔记。

<el-dialog title="克隆规则" :visible.sync="cloneDialogVisible" width="600px">
   <el-table
    v-loading="listLoading"
    :data="list2" //绑定的是list2
    element-loading-text="Loading"
    empty-text="没有数据了哦"
    border
    fit
    stripe
    :row-key="getRowKey"
    @selection-change="handleSelectionChange"
>
//过滤数据代码
showCloneRuleslView(user_id) {
    this.SourceUserId = parseInt(user_id)
    //filter过滤函数使用
    this.list2 = this.list.filter((data) => {
    //过滤掉SourceUserId这条数据
     return data.user_id !== this.SourceUserId
    })
    this.cloneDialogVisible = true
    console.log(this.SourceUserId)
  },

以上这篇Vue filter 过滤器、以及在table中的使用介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
JavaScript全局函数使用简单说明
Mar 11 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 #Javascript
vue a标签点击实现赋值方式
Sep 07 #Javascript
JavaScript实现多球运动效果
Sep 07 #Javascript
JavaScript实现世界各地时间显示
Sep 07 #Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 #Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 #Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 #Javascript
You might like
解析php中const与define的应用区别
2013/06/18 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
载入进度条 效果
2006/07/08 Javascript
Display SQL Server Version Information
2007/06/21 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
学生就业推荐信
2013/11/13 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
公司管理制度范本
2015/08/03 职场文书
学生会任命书范本
2015/09/21 职场文书