vue3+ts 如何把后端接口返回的某一列的数字0,1,2,3改成对应的文字而不是数字

在 Vue3 + TypeScript 中，您可以使用计算属性或过滤器来将后端接口返回的某一列数字转换为对应的文字。

假设您从后端接口获取的数据中有一个名为 `status` 的列，它的值为 0、1、2 或 3。您希望将这些数字转换为相应的文字。

一种实现方式是使用计算属性。在组件的 `computed` 部分添加一个计算属性来根据数字返回对应的文字：

computed: {
  getStatusText() {
    return (status) => {
      switch (status) {
        case 0:
          return '未开始';
        case 1:
          return '进行中';
        case 2:
          return '已完成';
        case 3:
          return '已取消';
        default:
          return '';
      }
    };
  }
}

然后，在模板中使用这个计算属性来显示转换后的文字：

<div v-for="item in items" :key="item.id">
  {{ getStatusText(item.status) }}
</div>

上述示例中，我们假设您有一个名为 `items` 的数组，其中包含从后端接口获取的数据。通过遍历 `items` 数组，并将每个项的 `status` 属性传递给计算属性 `getStatusText`，可以显示转换后的文字。

另一种实现方式是使用过滤器。在组件或全局注册一个过滤器来进行数字到文字的转换：

// 在组件中注册过滤器
filters: {
  statusText(status) {
    switch (status) {
      case 0:
        return '未开始';
      case 1:
        return '进行中';
      case 2:
        return '已完成';
      case 3:
        return '已取消';
      default:
        return '';
    }
  }
}

<div v-for="item in items" :key="item.id">
  {{ item.status | statusText }}
</div>

无论是使用计算属性还是过滤器，都可以将后端接口返回的数字转换为对应的文字，并在模板中显示转换后的内容。请根据您的实际情况选择其中一种方式，并根据您的数据和转换需求进行相应的调整。