element table 过滤器_Vue的过滤器filters在Element表格el-table中的应用 （Vue「过滤器」的使用，自定义过滤器 filters ）...

一、Vue过滤器filters的优点和使用场景

1. 优点：

filters不会修改数据，只是改变用户看到的输出(效果)

(计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示)。

2. 使用场景：

需要格式化数据的情况，比如我们需要处理 时间、价格等数据格式的输出 / 显示。

比如后端给你返回一个 年月日的日期字符串，前端需要展示为 多少天前 的数据格式，此时就可以用我们的fliters过滤器来处理数据。

二、Vue过滤器filters使用方法 (Vue 中使用「过滤器」filters)

过滤器用在 插值表达式 { { }} 和 v-bind 表达式 中，然后由管道操作符“ | ”进行指示。

过滤器是一个函数，它会把表达式 中的值始终当作函数的第一个参数。

三、 过滤器的定义方式

①. 本地过滤器： 把过滤器定义在当前使用的组件内。我们利用过滤器来修改需要输出的数据格式。

示例如下：

• 商品名称：{ {item.name}}
• 商品价格：{ {item.price | filterPrice}}
• 商品详情：查看详情

export default {

data () {

return {

products: [

{ name: 'cpu', price: 25, detail: 'cpu' },

{ name: '硬盘', price: '', detail: 'ying' }

]

}

},

filters: {

filterPrice (price) {

return price ? ('$' + price) : '--'

},

filterURL (val) {

return val ? ('https://baidu.com