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固定底网站底部菜单效果
Aug 13 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
php printf输出格式使用说明
2010/12/05 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
php实现分页工具类分享
2014/01/09 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
Prototype Selector对象学习
2009/07/23 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Django中的Model操作表的实现
2018/07/24 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python如何调用JS文件中的函数
2019/08/16 Python
酒店保洁主管岗位职责
2013/11/28 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫