今天看到这样一个问题:
原先遇到这种需要转换的情况,我都是在template中判断操作的,像这样:
<el-table-column prop="level" label="名称">
<template slot-scope="scope">
<span v-if="scope.row.level == 1">一级</span>
<span v-if="scope.row.level == 2">二级</span>
<span v-if="scope.row.level == 3">三级</span>
</template>
</el-table-column>
今天听大佬们都在用过滤器,当时有点懵,都不知道过滤器是啥、咋用了,所以查阅vue官方文档,重拾一下过滤器这么香的知识点。
比如上述情况,完全可以使用过滤器改造一下
第一步:在data平级的地方定义过滤器:
filters: grade (value) {
if (value == 1) return `一级`;
if (value == 2) return `二级`;
if (value == 3) return `三级`;
},
第二步:改写elementui table:
<el-table-column prop="level" label="名称">
<template slot-scope="scope">
{{ scope.row.level | grade }}
</template>
</el-table-column>
这样就ok啦,简单的例子不太能体现作用,但是到复杂处理的时候还是过滤器香,在行内会乱且麻烦。
过滤器里面的逻辑还是由自己的业务而定,我这个只是个简单的例子,更多内容请查看官方文档