Ant design Vue 表格中显示不同的状态(多条件显示)

比如:后端一个字段有多种状态:

那么后端接口会返回:0 或者 1 或者 2 其中一个,前端需要展示的是对应的文字,像简单的只有两个状态的可以直接在列里面操作:

 {
    title: '状态',
    dataIndex: 'usable',
    customRender: ({ text }) => {
      return text ? '启用' : '停用';
    }
  },

有的会有很多个状态,这个时候就在发请求的位置进行操作:

// 表格数据源
/* 如果想在数据源里面获取到接口返回的数据, 增加 async 和 await */
const datasource = async ({ page, limit, where }) => {
  const result = await pageThirdfwt({ ...where, page, limit });
  if (result.list.length > 0) {
    result.list.forEach((item) => {
      item.recTime = item.recTime ? item.recTime.split('T')[0].replace(/-/g, '-')  : item.recTime;
      if (item.parameterType == 1) {
        item.parameterType = '触发条件类型';
      } else if (item.parameterType == 2) {
        item.parameterType = '执行动作类型';
      }
    });
    return result.list; // 这里返回的数据要包含 list 和 count 两个字段,字段名称可以通过 response 属性配置
  } else {
    return [];
  }
};

 这种方式不仅可以使 后端返回的 0 1 2 等转换为相应的中文字段,也可以对后端返回的一些怪异的时间格式进行处理!

原始方法:

const datasource = ({ page, limit, where, orders }) => {
  return pageThirdfwt({ ...where, ...orders, page, limit });
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/728970.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

国产测温速度快且功耗低的温度传感芯片MY18E20可Pin-Pin替换DS18B20

MY18E20是一款国产高精度可编程的数字模拟混合信号温度传感芯片;感温原理基于CMOS半导体PN节温度与带隙电压的特性关系,经过小信号放大、模数转换、数字校准补偿后,数字总线输出,具有精度高、一致性好、测温快、功耗低、可编程配置…

剖析影响大米码垛机性能的关键因素

在现代化粮食加工产业链中,大米码垛机以其高效、精准的自动化操作,成为提升生产效率、降低劳动强度的得力助手。然而,要想充分发挥大米码垛机的性能优势,我们必须深入了解影响其性能的关键因素。星派将深入剖析这些关键因素&#…

1.XSS-反射型(get)

反射型XSS或不持久型XSS 含义&#xff1a;交互的数据一般不会被存在在数据库里面,只是简单的把用户输入的数据反射给浏览器&#xff0c;一次性&#xff0c;所见即所得。 进行测试一下页面是否存在xss漏洞&#xff0c;进行测试一下 "<>6666输入一些字符或者符号&am…

YOLOv10改进 | Neck | 添加双向特征金字塔BiFPN【含二次独家创新】

&#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录&#xff1a;《YOLOv8改进有效涨点》专栏介绍 & 专栏目录 | 目前已有40篇内容&#xff0c;内含各种Head检测头、损失函数Loss、B…

【面试干货】Java的基础类型和字节大小

【面试干货】Java的基础类型和字节大小 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java编程语言中&#xff0c;有八种基本数据类型&#xff0c;它们分别是&#xff1a;布尔型&#xff08;boolean&#xff09;、字节型&#xff08;byt…

前端架构(含演进历程、设计内容、AI辅助设计、架构演进历程)

前端架构的演进历程 前端架构的设计内容 技术选型(库、工具、标准规范、性能、安全、扩展性 )设计模式及代码组织(模块化、分层架构、数据结构)构建与部署(性能优化、自动化、集成、测试) 项目体量 小型项目&#xff1a;对于小型项目&#xff0c;前端架构需要关注模块化、组件…

可视化大屏开发涉及到的8大技术栈,收藏起来不迷路。

可视化大屏开发设计涉及到的技术栈包括&#xff1a; 前端开发技术&#xff1a; HTML、CSS、JavaScript、TypeScript等&#xff0c;用于构建用户界面和实现交互效果。 数据可视化库&#xff1a; 如D3.js、ECharts、Highcharts等&#xff0c;用于将数据以图表、地图、仪表盘等…

Hibernate 框架进行对象关系映射(ORM)

Hibernate是一个广泛使用的Java对象关系映射&#xff08;ORM&#xff09;框架&#xff0c;它通过将Java类与数据库表关联起来&#xff0c;使得开发人员可以使用面向对象的编程方式进行数据库操作。Hibernate的主要目标是消除冗长的JDBC代码和手动处理SQL的需求&#xff0c;从而…

在C#中对 JSON进行序列化和反序列化处理

概述&#xff1a;在现代软件开发领域&#xff0c;不同系统和平台之间的数据交换是不可或缺的方面。JSON&#xff08;JavaScript 对象表示法&#xff09;因其轻量级、人类可读和易于解析的特性而成为一种无处不在的数据格式。使用 C# &#x1f680;编程的 JSON 序列化和反序列化…

C# 语言在AGI 赛道上能做什么

自从2022年11月OpenAI正式对外发布ChatGPT依赖&#xff0c;AGI 这条赛道上就挤满了重量级的选手&#xff0c;各大头部公司纷纷下场布局。原本就在机器学习、深度学习领域占据No.1的Python语言更是继续稳固了自己AI一哥的位置。凭借着Microsoft 和 OpenAI 长期以来一直是紧密相连…

团队管理五个基本法则,帮你打造高效团队

团队管理是一项至关重要的工作&#xff0c;作为一名管理者&#xff0c;应该如何在团队管理中发挥作用呢&#xff1f;以下是团队管理的五个基本原则&#xff0c;它们能够帮助你打造出一个高效协作的团队。 一、以身作则 团队要保持超强的执行力&#xff0c;管理者必须以身作则…

【分类讨论】899. 有序队列

本文涉及知识点 分类讨论 LeetCode899. 有序队列 给定一个字符串 s 和一个整数 k 。你可以从 s 的前 k 个字母中选择一个&#xff0c;并把它加到字符串的末尾。 返回 在应用上述步骤的任意数量的移动后&#xff0c;字典序最小的字符串 。 示例 1&#xff1a; 输入&#xff1…

工业智能网关如何与设备连接?天拓四方

随着工业4.0时代的来临&#xff0c;智能化、自动化已成为工业生产的标配。在这样的背景下&#xff0c;工业智能网关应运而生&#xff0c;成为连接工业设备、实现数据交互与管理的关键节点。本文将阐述工业智能网关如何与设备连接&#xff0c;旨在为读者提供一套清晰、实用的解决…

【node】启动本地打包文件的方式

前言 … 目标 1 初始化node文件 2 将打包文件通过node发布到本地 3 系列文件 【node】创建本地接口 一 node方式 1 在新建一个空的文件夹node 进入空文件夹在,文件夹的地址栏输入cmd回车,会自动跳转到命令行工具里 2 配置初始化文件 在命令行输入命令npm init,生成pac…

CSDN自定义模块全攻略,DIY系统原有样式打造专属个性化主页!

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 &#x1f4af;如何通过HTMLCSS自定义模板diy出自己的个性化csdn主页&#x…

# 消息中间件 RocketMQ 高级功能和源码分析(八)

消息中间件 RocketMQ 高级功能和源码分析&#xff08;八&#xff09; 一、消息中间件 RocketMQ 源码分析&#xff1a;实时更新消息消费队列与索引文件流程说明 1、实时更新消息消费队列与索引文件 消息消费队文件、消息属性索引文件都是基于 CommitLog 文件构建的&#xff0…

mock-前端数据模拟

简介 数据模拟不是开发流程中的必要一环 Json-server 简介&#xff1a; json-server 是一个简单的 Node.js 服务端应用程序&#xff0c;这个工具的主要作用是提供一个模拟的后端服务&#xff0c;可以在前端开发过程中独立于后端进行简单工作。 使用&#xff1a; 1、 安装…

Python重力弹弓流体晃动微分方程模型和交直流电阻电容电路

&#x1f3af;要点 &#x1f3af;计算地球大气层中热层金属坠物运动轨迹 | &#x1f3af;计算炮弹最佳弹射角度耦合微分方程 | &#x1f3af;计算电磁拉莫尔半径螺旋运动 | &#x1f3af;计算航天器重力弹弓运动力学微分方程 | &#x1f3af;计算双摆的混沌运动非线性微分方程…

【无线传感网】分簇路由算法介绍

目录 1、LEACH路由算法 2、PEGASIS 算法 3、TEEN 算法 5、APTEEN 5、LEACH-C 算法 无线传感网中的路由协议就是寻找一条路径让网络中节点沿着这条路径将数据信息传输出去。路由协议的两大关键要点就是路径的优化和数据的分组,在传统计算机网络中,是将网络的拓扑…

windows系统实现应用程序开机即运行(不登录系统也行)

由于近期需要设置一个Java程序开机自启动&#xff0c;因此试了一下方法&#xff0c;总结了两点&#xff0c;一个是需要用户登录系统之后再启动&#xff0c;一种是不需要登录&#xff0c;只要开机就会启动。 先看准备工作&#xff0c;写一个启动脚本&#xff1a; echo on E: cd…