如何将后端返回的数字,传到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>


目录
相关文章
|
2天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
22 3
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
1月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
27天前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
2月前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
178 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
48 0
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。

热门文章

最新文章

下一篇
DataWorks