在Vue+ElementPlus的表格中:接口中返回数字类型的值转化在浏览器中转化为对应文字

在做项目时碰到问题，接口返回的值是数字，而要求在浏览器中显示的是对应的文字。在参考多数资料及动手实践后，解决了该类问题。

1.表格单元返回一个数字

      eqpType返回的是数字，而数字对应的文字如下：

export const equipList = [{
    type: 1,
    value: '泵'
},
{
    type: 2,
    value: '风机'
},
{
    type: 3,
    value: 'PH计'
},
{
    type: 4,
    value: '液位'
},
{
    type: 5,
    value: '水表'
},
{
    type: 6,
    value: '电表'
},
{
    type: 7,
    value: '蒸汽表'
}
]

在表格中根据行中的eqpType，将数字转化为文字，解决

     <el-table-column prop="eqpType" label="设备类型">
          <template v-slot="scope">{{ equiplist[scope.row.eqpType - 1].value }}</template>
     </el-table-column>

2.表格单元格返回多个数字

          如图所示，得到返回的API中有多个数字：

export const messagetype = [{
    value: '短信',
    type: 0
},
{
    type: 1,
    value: '语音 '
},
{
    type: 2,
    value: '微信'
},
{
    type: 3,
    value: '邮箱'
}
]

       通过对返回数组中以“，”为分隔标志，对各个数字逐一进行映射，代码如下：

<el-table-column prop="enableTypes" label="消息启用">
        <template v-slot="{ row }">
          {{
            String(
              row.enableTypes
                .split(",")
                .map(item => messagetypeList[item].value)
            ).replace(/\[|]/g, "")
          }}
        </template>
</el-table-column>