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 相关文章推荐
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
jquery+json实现分页效果
Mar 07 Javascript
vue组件实例解析
Jan 10 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
JavaScript canvas实现文字时钟
Jan 10 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无限分类的类
2007/01/02 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
php无限级分类实现方法分析
2016/10/19 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
jQuery回车实现登录简单实现
2013/08/20 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
五四青年节优秀演讲稿范文
2014/05/28 职场文书
升学宴家长致辞
2015/07/27 职场文书
导游词之神仙居景区
2019/11/15 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
python异步的ASGI与Fast Api实现
2021/07/16 Python