【Vue3系列】vue3过滤器功能

1. computed

    computed: {
      computedStatus() {
        // 计算属性要return一个函数接收参数
        return function (state) {
          switch (state) {
            case 1:
              return '待支付';
              break;
            case 2:
              return '待签署合同';
              break;
            case 3:
              return '待发货';
              break;
            case 4:
              return '运输中';
              break;
            case 5:
              return '已完成';
              break;
            case 6:
              return '已取消';
              break;
            default:
              return '其他';
              break;
          }
        };
      },
    },

2. TSX写法

customRender: ({ record }) => {
        const arr = ['待支付', '待签署合同', '待发货', '运输中', '已完成', '已取消'];
        const arrStatus = ['default', 'processing', 'success', 'error', 'warning', 'default'];
        return <Badge status={arrStatus[record.status - 1]} text={arr[record.status - 1]} />;
      },

customRender: ({ record }) => {
      const status = record.is_show;
      const enable = ~~status === 1;
      const color = enable ? 'green' : 'red';
      const text = enable ? '启用' : '停用';
      return h(Tag, { color: color }, () => text);
    },

 customRender: ({ text }) => {
        const color =
          text === ErrorTypeEnum.VUE
            ? 'green'
            : text === ErrorTypeEnum.RESOURCE
            ? 'cyan'
            : text === ErrorTypeEnum.PROMISE
            ? 'blue'
            : ErrorTypeEnum.AJAX
            ? 'red'
            : 'purple';
        return <Tag color={color}>{() => text}</Tag>;
      },

customRender: ({ record }) => {
        if (!Reflect.has(record, 'pendingStatus')) {
          record.pendingStatus = false;
        }
        return h(Switch, {
          checked: record.is_show === 2,
          checkedChildren: '已启用',
          unCheckedChildren: '已禁用',
          loading: record.pendingStatus,
          async onChange(checked: boolean) {
            record.pendingStatus = true;
            const newStatus = checked ? 2 : 1;
            const { createMessage } = useMessage();
            try {
              const params = {
                id: record.id,
                is_show: newStatus,
              };
              await editVersion(params);
              createMessage.success(`已成功修改状态`);
              record.is_show = newStatus;
              reload();
            } finally {
              record.pendingStatus = false;
            }
          },
        });
      },

 render: (val: number) => {
      const arr = ['未知', '男', '女'];
      return arr[val];
    },