如何将后端返回的数字,传到vue 前端转成汉字?

简介: 如何将后端返回的数字,传到vue 前端转成汉字?

废话少说,直接上代码

第一种:

a6735bd9f26d4ff593b2096ae0674847.png

timeFlagFormatter(row, column) {
      const preasCode = row.timeFlag;
      if (preasCode === '0') {
        return '日原因';
      } else if (preasCode === '1') {
        return '月原因';
      }
    },
    // eslint-disable-next-line no-unused-vars
    preasCodeFormatter(row, column) {
      const preasCode = row.preasCode;
      // eslint-disable-next-line no-empty
      if (preasCode === '01') {
        return '档案原因';
        // eslint-disable-next-line no-empty
      } else if (preasCode === '02') {
        return '计量原因';
      } else if (preasCode === '03') {
        return '采集原因';
      } else if (preasCode === '04') {
        return '窃电及违约用电因素';
      } else if (preasCode === '05') {
        return '技术因素';
      }
    },
    //原因小类格式化
    // eslint-disable-next-line no-unused-vars
    reasCodeFormatter(row, column) {
      const reasCode = row.reasCode;
      if (reasCode === '01') {
        return '台区总表电流互感器档案倍率与现场不一致';
        // eslint-disable-next-line no-empty
      } else if (reasCode === '02') {
        return '台区内经互感器接入用户的系统档案中倍率错误';
      } else if (reasCode === '03') {
        return '用户计量点档案与现场不一致';
      } else if (reasCode === '04') {
        return '台区档案不完整';
      } else if (reasCode === '05') {
        return '台户关系不一致';
      } else if (reasCode === '06') {
        return '流程归档不同步';
      } else if (reasCode === '07') {
        return '其它';
      }
    },

第二种:

<el-table-column prop="type" label="类型" align="center">
    <template v-slot="{ row }">
        <span v-show="row.type == 1">普通用户</span>
        <span v-show="row.type == 2">管理员</span>
        <span v-show="row.type == 3">项目经理</span>
    </template>
</el-table-column>

第三种:

data(){
   return(){
    getRuleClassLabel: [
  { ruleCode: '01', ruleLabel: '异常台区规则' },
  { ruleCode: '02', ruleLabel: '特殊台区规则' },
  { ruleCode: '03', ruleLabel: '档案异常台区规则' },
  { ruleCode: '04', ruleLabel: '计量异常台区规则' },
  { ruleCode: '05', ruleLabel: '采集异常台区规则' },
  { ruleCode: '06', ruleLabel: '技术因素异常台区' }
],
getDirectionLabel: [
  { ruleCode: '01', ruleLabel: '规范管理' },
  { ruleCode: '02', ruleLabel: '规避考核' },
  { ruleCode: '03', ruleLabel: '业务提醒' }
],
   }
}
classFormat(row, obj) {
  let filter = obj.filter(res => res.ruleCode === row);
  return filter[0]?.ruleLabel;
},
<el-table :data="resultData" >
  <el-table-column prop="repFlag" label="处理结果" width="120"> 
     <template v-slot="scope">
       <span>{{ classFormat(scope.row.isOrder, getIsOrderLabel) }}</span>
     </template>
  </el-table-column>
</el-table>


目录
相关文章
|
4天前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
3天前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
3天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术实践
本文将介绍如何通过前端和后端技术相结合,构建现代化Web应用的技术实践。我们将探讨前端开发、后端架构以及多种编程语言(如Java、Python、C、PHP、Go)在构建高效、可扩展的Web应用中的应用。
|
4天前
|
前端开发 JavaScript Java
npm与Maven:前端与后端构建工具深度对比学习
npm与Maven:前端与后端构建工具深度对比学习
|
4天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发者的必备技能
随着互联网技术的不断发展,全栈开发者的需求日益增长。本文将介绍如何从前端到后端,掌握全栈开发所需的关键技能,包括前端框架的选择、后端语言的学习以及数据库的应用,帮助读者构建成为全面的技术专家。
|
5天前
|
前端开发 测试技术 持续交付
《跨界合作:前端与后端如何优化协作效率》
在当今软件开发领域,前端和后端开发团队通常是分开工作的,但他们的协作质量直接影响着项目的成功与否。本文将探讨如何通过优化前端与后端的协作方式,提高开发效率和项目质量,从而实现更好的跨界合作。
|
5天前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端的技术探索
【5月更文挑战第12天】Vue.js是渐进式前端框架,以其简洁和强大的特性深受开发者喜爱。它聚焦视图层,采用MVVM模式实现数据与视图的双向绑定,简化开发。核心特性包括响应式数据绑定、组件化、模板系统和虚拟DOM。通过创建Vue实例、编写模板及定义方法,可以构建交互式前端,如计数器应用。Vue.js让复杂、交互式的前端开发变得更加高效和易维护。
|
5天前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
23小时前
|
监控 负载均衡 API
构建高效可靠的微服务架构:后端开发的新趋势
【5月更文挑战第19天】 在当今快速发展的数字时代,微服务架构已经成为了软件开发领域的一大热点。本文将深入探讨如何构建一个高效且可靠的微服务架构,以满足不断变化的业务需求和应对日益增长的用户需求。我们将从微服务的基本概念、优势、关键技术以及实践建议等方面进行详细阐述,为后端开发人员提供一套完整的解决方案。
|
2天前
|
监控 持续交付 开发者
构建高效微服务架构:后端开发的新范式
【5月更文挑战第18天】 随着现代软件开发的复杂性日益增长,传统的单体应用架构已难以满足快速迭代和灵活部署的需求。本文聚焦于一种新兴的解决方案——微服务架构,探讨其如何为后端开发带来革命性的改变。我们将深入分析微服务的核心概念、优势与挑战,并通过具体案例来阐述如何在实际项目中实施微服务架构。文章旨在为开发者提供一种系统化的方法,帮助他们理解并应用微服务架构,以提升系统的可维护性、扩展性和技术敏捷性。
14 2