使用elementplus，将后端传的数字改为指定的值

Question

使用elementplus，如何在js中，将后端传的数字改为指定的值？
这是js

const column = reactive([
  { prop: "name", label: "姓名", minWidth: 60 },
  { prop: "id", label: "工号ID", minWidth: 160 },
  { prop: "position", label: "岗位", minWidth: 60 },
  { prop: "status", label: "状态", minWidth: 60 },
]);

<el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :min-width="column.minWidth"
        show-overflow-tooltip
      >

我想要把status的值：1,2改为“在线”，“离线”，但我用了v-if，以及三目运算，都提示我语法错误，应该怎么做？

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ

你可以使用slot-scope和template来实现这个功能。在el-table-column中，可以添加一个template元素，将status属性的值作为插槽的值传递给模板，然后在模板中使用JavaScript逻辑将其转换为字符串，如下所示：

<el-table-column
  v-for="column in columns"
  :key="column.prop"
  :prop="column.prop"
  :label="column.label"
  :min-width="column.minWidth"
  show-overflow-tooltip
>
  <template slot-scope="scope">
    <span v-if="scope.row.status === 1 || scope.row.status === 2">
      {{ scope.row.status === 1 ? '在线' : '离线' }}
    </span>
    <span v-else>
      {{ scope.row.status }}
    </span>
  </template>
</el-table-column>

在这个例子中，我们首先检查status属性的值是否为1或2。如果是，我们将它转换为“在线”或“离线”，然后将结果显示为文本。如果不是1或2，我们只是显示原始值。

这个逻辑在模板中使用三元运算符来完成。我们首先检查scope.row.status的值是否等于1。如果是，我们返回“在线”，否则返回“离线”。最后，我们在两个条件之间使用冒号运算符（:）来连接它们。