关于vue中的过滤器使用--结合element-ui的table项

参考文档： https://blog.csdn.net/tg928600774/article/details/81945140?utm_source=blogxgwz1

https://blog.csdn.net/qq_41649755/article/details/106331555?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

项目需求：

从接口中获取数据，渲染显示在表格中，且数据精度保留两位小数。

在element-ui中表格的显示中，插槽的具体使用。

table按照tableData这个数组的长度来生成多少行，按照有多少个el-table-column来生成多少列。

<template slot-scope="scope">

在<el-table-column>中使用自定义皮知袜模板，实现对渲染数据的改变。

template中自定义列模板，自定义列的显示内容，可组合其他燃激组件使用。

利用scope.row获取该行中dataYoyYear所对应的列值数据，进而进行修改。

拿到数据之后，就要结合vue的过滤器对数据进行修改精度。

mention！此时猛培的filters方法，而不是filter。important：该方法与methods并列，否则报错！

1.通过添加v-cloak属性，来进行vue页面的优化，cloak可以是任意内容，只要前面加v-就可以

2.过滤器：（派隐掘1）在{{}}插值的尘核尾部添携弯加一个管道符“|”对数据进行过滤

（2）经常用于格式化文本，比如字母的大小写，货币单位，时间日期补0，

（3）过滤器的方法是自定义的，分为全局和局部，全局过滤器要写在new Vue前面，局部要写new Vue里面，在没有冲突的前提下，过滤器可以串联

一、什么是过滤器？

过滤器是在数据渲染时，根据使用的过滤器来渲染数据，过滤器不改变真正的data，而只是改变渲染的结果昌喊配，并返回过滤后的版本。

二、过滤器怎样使用？

渲染时使用 “| 过滤器名称”。eg: v-for=”val in arr | filterBy ‘a’ 取包含’a’的渗闹数据

三、常用过滤器介绍

1、debounce ------配合事件，延迟执行

eg: @keyup=”functionname | debounce 2000 ”

2、limitBy 配合数据，限制几条数据

eg: v-for=”val in arr | limityBy 2 1” 从下标为1的元素开始取两条数据

eg: v-for=”val in arr | limityBy 2” 只取前2条数据

3、filterBy 取包含某个元素的数据

eg: v-for=”val in arr | filterBy ‘a’ 取包含’a’的数据

4、orderBy 1（升序）/2（降序）排序

eg: v-for="val in arr | orderBy 1" 升序排序耐指

eg: orderBy 年龄 1按年龄升序排序

三、自定义过滤器

时间过滤器

<div class="box">

---