element-ui表格中如何对表头字段进行过滤器过滤

在实际项目的开发中，常常会遇到一种情况，比如：表格中存在支付类型这个字段，后台返回的为数字1,2,3,4等，然后我们前端就需要就后台返回的数字类型转换为对应的支付类型渲染到对应的表格中去。
这种有很多方法去处理，比如之前我经常考虑用render函数去处理它，但是实际上，使用过滤器的话，会更方便。

1、现在vue实例外部定义一个对应的列表项

image.png

const payTypeOptions = [
  { type: "1", name: "微信支付" },
  { type: "2", name: "支付宝支付" },
  { type: "3", name: "银行卡支付" },
  { type: "4", name: "现金支付" },
];

这个必须要在Vue实例外部去写，不能写在data选项中，因为在过滤器当中，不能引用当前实例this, 所以需要在实例外部去定义!

2、开始写过滤器代码

  filters: {
    payTypeFilter(type) {
      const isPayType = payTypeOptions.find((obj) => {
        return obj.type === type;
      });
      return isPayType ? isPayType.name : "";
    },
  },

如果在列表项中找到该项，那么就返回它的name，也就是支付类型。

3、element-ui表格的处理

      <el-table-column prop="paytype" label="支付方式" width="180">
        <template slot-scope="scope">
          <el-tag
            :type="
              scope.row.paytype == '1'
                ? 'success'
                : scope.row.paytype == '2'
                ? 'info'
                : scope.row.paytype == '3'
                ? 'warning'
                : ''
            "
            >{{ scope.row.paytype | payTypeFilter }}</el-tag
          >
        </template>
      </el-table-column>

4、效果展示

image.png