使用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 },
]);
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,以及三目运算,都提示我语法错误,应该怎么做?
你可以使用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>
这个逻辑在模板中使用三元运算符来完成。我们首先检查scope.row.status的值是否等于1。如果是,我们返回“在线”,否则返回“离线”。最后,我们在两个条件之间使用冒号运算符(:)来连接它们。
<template slot-scope="scope">
<span >
{{ (scope.row.status == ’1‘ || scope.row.status == ’2‘) ? '在线' : '离线' }}
</span>
</template>