vue+Element table表格字段使用后端返回的字段数据配置语言国际化以及字符串拼接

最新推荐文章于 2024-05-21 23:35:31 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-05-21 23:35:31 发布

阅读量1.2k

点赞数

分类专栏： js vue 方法文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/Maxueyingying/article/details/128949792

版权

vue 同时被 3 个专栏收录

98 篇文章 4 订阅

订阅专栏

方法

72 篇文章 1 订阅

订阅专栏

67 篇文章 1 订阅

订阅专栏

需求：table表格接口返回状态字段，根据后端给的状态英文数据，显示对应的中文及背景颜色

页面展示

在这里插入图片描述

数据返回格式

在这里插入图片描述

方法一

 <el-table-column prop="status" :label="$t('NeoLight.status')">
        <template slot-scope="scope">
          <div v-if="scope.row.status === 'WAIT'" class="wait-color">
            {{ $t("NeoLight.wait") }}
          </div>
          <div v-else-if="scope.row.status === 'UN_END'" class="noFinish-color">
            {{ $t("NeoLight.noFinish") }}
          </div>
          <div
            v-else-if="scope.row.status === 'EXECUTING'"
            class="execut-color"
          >
            {{ $t("NeoLight.executing") }}
          </div>
          <div v-else-if="scope.row.status === 'FINISHED'" class="status-color">
            {{ $t("NeoLight.finish") }}
          </div>
          <div v-else-if="scope.row.status === 'END'" class="end-color">
            {{ $t("NeoLight.end") }}
          </div>
          <div v-else-if="scope.row.status === 'CANCEL'" class="cancel-color">
            {{ $t("NeoLight.canceled") }}
          </div>
          <div v-else class="default-color">
            {{ scope.row.status }}
          </div>
        </template>
      </el-table-column>

<style rel="stylesheet/scss" lang="scss" scoped>
.finished-color {
  background-color: #74bedf;
  width: 40%;
  text-align: center;
}
.cancel-color {
  background-color: #555555;
  width: 40%;
  text-align: center;
}
.wait-color {
  background-color: #f59a23;
  width: 40%;
  text-align: center;
}
.executing-color {
  background-color: #00bfbf;
  width: 40%;
  text-align: center;
}
.end-color {
  background-color: #027db4;
  width: 40%;
  text-align: center;
}
.un_end-color {
  background-color: #74bedf;
  width: 40%;
  text-align: center;
}
.default-color {
  background-color: #1c4d84;
  width: 40%;
  text-align: center;
}
</style>

这样也可以实现但是后端那边如果加一个状态类型，前端既要改页面代码还要配置不同的语言，比较繁琐

所以考虑直接使用后端返回的status值来做标记 拼接使用

      <el-table-column prop="status" :label="$t('NeoLight.Status')">
        <template slot-scope="scope">
          <div :class="`${scope.row.status.toLowerCase()}-color`">
            {{ $t(`NeoLight.logStatus.${scope.row.status.toLowerCase()}`) }}
          </div>
        </template>
      </el-table-column>

国际化语言配置文件

在这里插入图片描述
zh_CN.js

  NeoLight: {
    logStatus: {
      wait: '等待中',
      un_end: '未完成',
      executing: '正在执行',
      finished: '已完成',
      end: '已结束',
      cancel: '已取消',
    },
  }

en_US.js

  NeoLight: {
    logStatus: {
      wait: 'Waiting',
      un_end: 'Unend',
      executing: 'Executing',
      finished: 'Finished',
      end: 'End',
      cancel: 'Cancel',
    },
  }

zn_TW.js

  NeoLight: {
    logStatus: {
      wait: '等待中',
      un_end: '未完成',
      executing: '正在執行',
      finished: '已完成',
      end: '已結束',
      cancel: '已取消',
    },
  }

ja_JP.js

  NeoLight: {
     logStatus: {
      wait: '待っています',
      cancel: 'キャンセルしました',
      un_end: '未完成',
      executing: '実行中',
      finished: '完了しました',
      end: '終了しました',
    },
  }