碰到一个逆天表中表数据渲染

news2024/10/6 20:36:41

1. 逆天表中表数据问题

  1. 我有一个antd-table组件,他的编辑可以打开一个编辑弹窗
  2. 打开弹窗里面还会有一个表格,如果这个表格的column是在外层js文件中保存的话,那么第一次打开会正常渲染数据,再次打开就不会渲染,即使是已经调用了接口
  3. 如果这个column定义在编辑弹窗中的表格组件中,那么永远会正常渲染数据

2. 发现只有定义 slot 之后再次打开才会显示

这里只是针对外部js

当表格编辑取消之后,没有定义slot的不显示,其实是有数据的,定义了slot的就会显示,就像这样
在外部js文件中每个定义slot之后再次打开会显示
这说明表格确实是有数据的,但是关闭原表编辑弹窗后再打开却只显示了一个slot的 imageUrl
不明白什么原因,先记录一下

// 这是表格的编辑弹窗内定义的p-table组件
<p-table
  :fetch="fetch ? fetch : []"
  :columns="TABLE_COLUMN"
  :bordered="true"
  :filterMultiple="true"
  ref="pTable"
>
  <template #imageUrl="{record}">
    <a-image style="width: 50px; height: 50px;" :src="record.imageUrl"></a-image>
  </template>
</p-table>

// 以下是外部js文件中导出的常量
export const TABLE_COLUMN = [
  { title: "商品名称", dataIndex: "name", key: "name" },
  { title: "商品Id", dataIndex: "goodsId", key: "goodsId" },
  { title: "订单号", dataIndex: "orderItemsId", key: "orderItemsId"},
  { title: "退款单号", dataIndex: "aftersalesId", key: "aftersalesId" },
  { title: "商品图片", dataIndex: "imageUrl", key: "imageUrl", slots: { customRender: "imageUrl" }},
  { title: "申请时间", dataIndex: "createTime", key: "createTime" },
];

而且数据获取了,打印出来一看是数据集合 [{xxx: 'xxx'}]
但是有的 dataIndex 就是不显示,即使是有数据的…’
下面的两个,是真的不会显示数据,即使定义了 slot ,其余的都显示了,就这两条数据没有显示,其实是有数据的
在这里插入图片描述

{ title: "订单号", dataIndex: "orderItemsId", key: "orderItemsId"},
{ title: "退款单号", dataIndex: "aftersalesId", key: "aftersalesId" }

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

彻底弄清Python软件包安装流程并解决安装错误

彻底弄清Python软件包安装流程并解决安装错误 前言&#xff1a;写这篇文章的初衷也是因为以前饱受Python环境配置和软件包安装的摧残&#xff0c;所以写下这篇文章希望帮助同样深陷泥潭的小伙伴们&#xff0c;该文会带你理解关于安装软件包的流程。&#xff08;tips&#xff1…

大数据Doris(二十五):Stream Load数据导入演示和其他导入案例

文章目录 数据导入演示和其他导入案例 一、数据导入演示

Java获取指定日期到当前日期的差距

Java获取指定日期到当前日期的差距 一、指定日期到今天的y年m月d日 private JSONObject getYesrMonthDay(String dataParam){JSONObject res new JSONObject();/*只比较年月日&#xff0c;不要时间*/DateTimeFormatter df DateTimeFormatter.ofPattern("yyyy-MM-dd&quo…

Linux入门攻坚——6、磁盘管理——分区及文件系统管理

磁盘管理主要涉及分区的管理&#xff0c;以及分区后的文件系统管理。 磁盘的使用大体要分两步&#xff1a; 文件系统也是一个软件&#xff0c;根是自引用的。 文件系统的全局结构&#xff1a;物理格式&#xff1a; 一个磁盘刚被生产出来的时候&#xff0c;它里边没有划分扇区…

什么是RS485通信

RS-485是一种通讯接口标准&#xff0c;RS就是Recommended Standard的缩写&#xff08;推荐标准的意思&#xff09;485是标识号。 RS485采用总线的接线方式&#xff0c;广泛应用于数据采集和控制&#xff0c;它的主要优点之一是它允许将多个RS485设备放在同一条总线上。 多设备…

Python如何实现原型设计模式?什么是原型设计模式?Python 原型设计模式示例代码

什么是原型&#xff08;ProtoType&#xff09;设计模式&#xff1f; 原型模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;旨在通过复制现有对象来创建新对象&#xff0c;而无需通过标准的构造方式。它允许我们基于现有对象创建新对象&#xf…

【Python/C++ 递归】汉诺塔

汉诺塔&#xff08;Tower of Hanoi&#xff09;&#xff0c;又称河内塔&#xff0c;是一个源于印度古老传说的益智玩具。大梵天创造世界的时候做了三根金刚石柱子&#xff0c;在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。大梵天命令婆罗门把圆盘从下面开始按大小顺序重…

车牌识别 支持12种中文车牌类型 车牌数据集下载

开源代码 如果觉得有用&#xff0c;不妨给个Star⭐️&#x1f31f;支持一下吧~ 谢谢&#xff01; Acknowledgments & Contact 1.WeChat ID: cbp931126 2.QQ Group&#xff1a;517671804 加微信(备注&#xff1a;PlateAlgorithm),进讨论群可以获得10G大小的车牌检测和识…

【EI会议征稿】第三届材料工程与应用力学国际学术会议(ICMEAAE 2024)

第三届材料工程与应用力学国际学术会议&#xff08;ICMEAAE 2024&#xff09; 2024 3rd International Conference on Materials Engineering and Applied Mechanics 2024年第三届材料工程与应用力学国际学术会议&#xff08;ICMEAAE 2024&#xff09;将于2024年3月15-17日在中…

【活动回顾】ABeam News | 庆祝ABeam德硕与毕博中国战略合作十周年,关系再升级

国家会展中心 Date.2023.11.6 ​China International Import Expo 上周&#xff0c;ABeam作为毕博中国长期的战略合作伙伴&#xff0c;受邀出席了毕博中国在第六届进博会展台召开的战略合作十周年庆祝仪式。 本次战略合作庆祝仪式在进博会这个充满活力、创新与友谊的舞台举…

【Linux】 线程

pthread_join: 获取线程返回值 #include <stdio.h> #include <stdlib.h> #include <pthread.h> #include <unistd.h> #include <string.h>/*** 测试 pthread_join* 阻塞等待一个子线程的退出&#xff0c;可以接收到某一个子线程调用pthread_ex…

企业OA办公系统的设计与实现【附源码】

企业办公自动化系统设计与实现 毕业论文 摘 要 办公自动化&#xff08;Office Automation,简称OA&#xff09;是将现代化办公和计算机网络功能结合起来 的一种新型的办公方式。企业办公自动化系统在此基础上实现企业的快速运转和交流&#xff0c;进而 有效提高企业办公效率。 本…

MCU内存基础知识

文章目录 一、存储器分类二、C语言内存分区内存区三、STM32启动文件分析四、应用分析 一、存储器分类 RAM&#xff08;Random Access Memory) &#xff1a;掉电之后就丢失数据&#xff0c;读写速度块 ROM (Read Only Memory) &#xff1a;掉电之后仍然可以保持数据 单片机的RA…

webshell免杀之传参方式

1.Cookie 由于Cookie基本上是每个web应用都需要使用到的&#xff0c;php应用在默认情况下&#xff0c;在Cookies请求头中会存在一个PHPSESSIDxxxx这样的cookie&#xff0c;其实这个就可以成为我们的传参位置 使用burp抓包将内容改成base64加密后的命令 可以看到已经执行成功了…

英飞凌TC3xx的LMU SRAM保护机制(二)

目录 1.SRAM保护配置使能 2.测试结果分析 3.小结 我们接着上文继续来梳理如何配置LMU的保护机制 英飞凌TC3xx的LMU SRAM保护机制(一)-CSDN博客 1.SRAM保护配置使能 简单举两个例子&#xff0c;地址下限寄存器如下&#xff1a; 可以看到使用SRI地址的bit31-5用于作为边界&am…

Swift-day 2

1、数据绑定&#xff0c;改变标题 State private var zoomed: Bool false 属性包装器包装的变量self.title 单向绑定 self.$textInput 双向绑定 传的是数据结构 self.title self.textInput 赋值是String self._titletitle //绑定类型加下划线2、数据绑定&#xff0c;传递结构…

毕业设计JSP 2384网上diy蛋糕店管理系统【程序源码+讲解视频+调试运行】

一、摘要 本文将介绍一个功能全面、易于使用的网上DIY蛋糕店管理系统。该系统包括用户和管理员两种用户&#xff0c;每种用户都有相应的功能模块。系统实现了网站首页、用户注册/登录、蛋糕展示、综合排行、购物车、蛋糕DIY和用户中心等功能&#xff0c;同时管理员还可以进行管…

测试之路,女孩子软件测试-职业规划建议,路就在脚下...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、测试岗是不是加…

Axure RP Pro 8 mac/win中文版:打造无限可能的原型设计工具

在如今的数字化时代&#xff0c;原型设计工具越来越受到设计师和产品经理们的重视。而Axure RP Pro8作为一款强大的原型设计工具&#xff0c;成为了众多专业人士的首选。 首先&#xff0c;Axure RP Pro8具备丰富的功能。它提供了多种交互元素和动画效果&#xff0c;使得用户可…

“移动机器人课程群实践创新的困境与突围”素材

以下是一篇应用型本科教研论文“移动机器人课程群实践创新的困境与突围”的大纲。您可以根据这个大纲展开您的论文写作&#xff1a; 一、引言 移动机器人技术的发展和应用价值移动机器人课程群在应用型本科教育中的重要性论文目的和研究问题&#xff1a;解析移动机器人课程群实…