element-table中使用vue filter 过滤器

今天看到这样一个问题：

原先遇到这种需要转换的情况，我都是在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啦，简单的例子不太能体现作用，但是到复杂处理的时候还是过滤器香，在行内会乱且麻烦。
过滤器里面的逻辑还是由自己的业务而定，我这个只是个简单的例子，更多内容请查看官方文档