When element-table is displayed, it displays different states according to the numbers, and the processing method when there are too many numbers

Log a question:

Previously, when processing element-table to display different states based on numbers, ternary expressions were usually used because there were generally not too many states; but today when a piece of data needs to be processed in seven states, writing a ternary expression is a bit excessive. Long, ask the boss to learn a new way to deal with it

This method uses the filtering method of vue. I have learned it before, but I haven’t used it too much. This time, I will strengthen my memory and relearn it

<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,
      },
  },

};

Display the effect after processing is completed