过滤器filters

局部过滤器和全局过滤器

 

过滤方法中有一个参数，这个参数就是传进来要过滤的元素

注意：使用过滤器会出现死循环，因为在将原数组排序后赋值给原数组，引用空间没有变化，过滤一直执行

解决方法：

使用扩展符将数组赋值给新的变量，引用空间发生变化后，不会再循环

filters:{ 
  sortArray(value){ 
    // value是要过滤的元素 
    let [...array] = [...value]; //引用空间发生变化，将原数组赋值给新数组 
    array.sort((a,b)=>b-a); 
    return array; // 必须有返回值 
  } 
}

过滤器中必须有返回值

一般使用花括号{{}}插值，管道符前是要过滤的元素，管道符之后是过滤方法

例如：

<el-table-column prop="isopenallhours" label="是否24小时营业"> 
  <template slot-scope="scope">
     {{scope.row.isopenallhours | isopenallhoursFilter}}
  </template> 
</el-table-column>

 

局部过滤器（只能在当前组件使用）

 

 

全局过滤器

1、在src目录下新建一个filters文件夹,在filters目录下创建一个index.js文件

// 是否24小时营业 export function isopenallhoursFilter(string) { let str = '' switch (string) { case '1': str = '是' break case '2': str = '否' break } return str }

2、在入口文件main.js中引入filters ，全局注册

import * as filters from './filters' // 过滤器统一处理加载 Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })

3、在组件中使用直接用管道符| 加上过滤函数名

 

import ... as 导入一个模块，相当于导入一个目录，是相对路径

import A as B 代表工具库A有一个别称是B

from ... import 导入一个模块中的一个函数，相当于导入一个目录中的文件，是绝对路径

from A import b 相当于A.b

或者是import b from A