element-table 展示时根据数字展示不同状态，数字过多时处理方法

记录一个问题：

之前处理 element-table 根据数字展示不同状态时，通常都使用三元表达式，因为一般不会有太多的状态；但是今天碰到一条数据需要处理七种状态，写三元表达式就有些过长，询问大佬后学会一种新处理方法

这个方法使用到 vue 的过滤方法，之前有学习过，但没有过多使用，此次加强回忆，并重新学习

<el-table :data='list'>
     <el-table-column prop="state" label="商品状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.state | stateFmt }}
        </template>
     </el-table-column>
</el-table>

export default {
  name: "GoodsOrder",
  filters: {
    stateFmt(state) {
      return (
        {
          1: "待审核",
          2: "审核通过",
          3: "商家待确认",
          4: "待送货",
          5: "商家已发货",
          6: "门店确认收货",
          9: "取消",
        }[state] || "其他"
      );
    },
  },
  data() {
    return {
      // 加载状态
      loading: true,
      // 请求参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
  },

};

处理完成后展示效果