Vue+ElementUI 表格中使用过滤器

最近遇到一个这样的需求：超出几个字长度的话，就省略绝大部分内容并且加一个省略号。

其实不难，有各种方法可以实现，那么我这里突然想到用过滤器实现，研究后，表示可行。

过滤器写法

Vue.filter('formatLength', value => {
    return value.length > 9 ? value.slice(0, 9) + '...' : value
})

很简单，如果字符串的长度超过9，那么就会截取前九位并加三个点；如果说压根没超过9，那就作罢，直接返回原字串。

ElementUI写法

<el-table-column
        prop="body"
        label="详情"
>
    <template slot-scope="scope">{{scope.row.body | formatLength}}</template>
</el-table-column>

为了可以使用这个过滤器，这里要加一个<template>标签自定义显示内容，然后把管道加上去就ok了。

结果

对你有帮助的话，请点一个赞吧~