当前位置: 首页 > news >正文

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 });
};

http://www.lryc.cn/news/384741.html

相关文章:

  • 如何借助物联网实现土壤监测与保护
  • Linux之prometheus安装和使用简介(一)
  • orcle数据表空间操作sql
  • 【Unity Android】Unity链接安卓手机调试
  • 数据结构与算法笔记:高级篇 - 概率统计:如何利用朴素贝叶斯算法过滤垃圾短信?
  • vue3中通过vditor插件实现自定义上传图片、录入echarts、脑图、markdown语法的编辑器
  • 揭示数据库内核的奥秘--手写数据库toadb开源项目
  • Grafana调整等待时间,避免Gateway timeout报错
  • MetaGPT全面指南:多代理协作框架的深入解析与应用
  • 图的关键路径算法
  • 模型情景制作-冰镇啤酒
  • 网页实现黑暗模式的几种方式
  • VMware Workstation环境下,邮件(E-Mail)服务的安装配置,并用Windows7来验证测试
  • 《信号与系统》复试建议
  • 代码随想录训练营Day45
  • NAT和内网穿透
  • android | 声明式编程!(笔记)
  • 友力科技IDC机房搬迁方案流程分享
  • 仿迪恩城市门户分类信息网discuz模板
  • Windows 注册表是什么?如何备份注册表?
  • B+树与索引解析
  • 华为认证hcna题库背诵技巧有哪些?hcna和hcia有什么区别?
  • 【常用报文状态码】
  • Linux命令详解
  • 在阿里云使用Docker部署MySQL服务,并且通过IDEA进行连接
  • Spring Boot中的国际化(i18n)实现技巧
  • vite-ts-cesium项目集成mars3d修改相关的包和配置参考
  • 「树莓派入门」树莓派基础04-VNC连接与配置静态IP
  • JAVA编程题期末题库【中】
  • 【十年JAVA搬砖路】——MYSQL备份使用mysqldump