vue 根据接口返回的数字显示对应的文字

饱饱~~

已于 2023-06-12 15:26:20 修改

阅读量936

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-10-10 15:19:06 首次发布

本文链接：https://blog.csdn.net/m0_58893670/article/details/127245309

版权

vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

第一种

<mtd-form-item label="连接状态:" prop="state" v-show="formCustom.state == 0">
    <div>
        <span class="failure"></span> 连接失败
    </div>
</mtd-form-item>

<mtd-form-item label="连接状态:" prop="state" v-show="formCustom.state == 1">
    <div>
        <span class="succeed"></span> 连接成功
    </div>
</mtd-form-item>

第二种：三目运算

<mtd-form-item label="连接状态:" prop="state">
    {{ formCustom.state == 0 ? "连接失败" : formCustom.state == 1 ? "连接成功"}}
</mtd-form-item>

前两种方法都是非1即2的判断，不适用存在多种情况

第三种：formatter

<el-table-column
    prop="status"
    label="实例状态"
    :formatter="statusFormatter"
/>

methods: {
    statusFormatter(row) {
      const status = row.status;
      if (status == 3) {
        return "提交中";
      } else if (status == 10) {
        return "处理中";
      } else if (status == 20) {
        return "运行中";
      } else if (status == 30) {
        return "失败";
      } else if (status == 40) {
        return "成功";
      } else if (status == 50) {
        return "未知";
      } else if (status == 60) {
        return "已删除";
      }
   },
}