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

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

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" }

相关文章:

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

1. 逆天表中表数据问题 我有一个antd-table组件&#xff0c;他的编辑可以打开一个编辑弹窗打开弹窗里面还会有一个表格&#xff0c;如果这个表格的column是在外层js文件中保存的话&#xff0c;那么第一次打开会正常渲染数据&#xff0c;再次打开就不会渲染&#xff0c;即使是已…...

记录我常用的免费API接口

目录 1.随机中英文句子 2.随机中英文句子&#xff08;带图片和音频&#xff09; 3.随机一句诗 4.随机一句话 5.随机一句情话 6. 随机一句舔狗语录 7.历史上的今天 8.获取来访者ip地址 9&#xff1a;获取手机号信息 10. 垃圾分类查询 11.字典查询 12.QQ信息查询 1.随…...

编程的简单实例,编程零基础入门教程,中文编程开发语言工具下载

编程的简单实例&#xff0c;编程零基础入门教程&#xff0c;中文编程开发语言工具下载 给大家分享一款中文编程工具&#xff0c;零基础轻松学编程&#xff0c;不需英语基础&#xff0c;编程工具可下载。 这款工具不但可以连接部分硬件&#xff0c;而且可以开发大型的软件&…...

创芯科技USB_CAN【库文件】

只用到【只收】【只发】功能 23.11.18 using help; //using Models; using System; using System.Collections.Generic; using System.Linq; using System.Net.NetworkInformation; using System.Runtime.CompilerServices; using System.Runtime.InteropServices; using Sys…...

React整理总结(四)

1.过渡动画react-transition-group Transition 与平台无关&#xff0c;不一定使用css实现CSSTransition组件&#xff0c;in属性控制展示隐藏&#xff0c;添加className&#xff1b;有三个状态appear | enter | exit 第一类&#xff0c;开始状态&#xff1a;对于的类是-appear、…...

ajax,axios,fetch

文章目录 ajax工作原理ajax发请求四个步骤创建xmlhttprequest对象设置请求方式设置回调函数发送请求 自封装ajax axiosaxios 特性如何用配置拦截器fetch 三者区别 ajax 工作原理 Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)&#xff0c;使用户操作与服务…...

Java值传递和引用传递

在Java中&#xff0c;有值传递&#xff08;Pass-by-Value&#xff09;和引用传递&#xff08;Pass-by-Reference&#xff09;两种参数传递方式。 值传递&#xff08;Pass-by-Value&#xff09;&#xff1a;当使用值传递方式时&#xff0c;方法将参数的副本传递给调用方法。这意…...

FPGA_IIC代码-正点原子 野火 小梅哥 特权同学对比写法(1)

FPGA_IIC代码-正点原子 野火 小梅哥 特权同学对比写法&#xff08;1&#xff09; 单字节写时序单字节读时序I2C 控制器设计模块框图scl_high 和 scl_low 产生的时序图状态转移图 Verilog代码 FPGA_IIC代码-正点原子 野火 小梅哥 特权同学对比写法&#xff08;1&#xff09; FPG…...

LabVIEW编程开发NI-USRP

LabVIEW编程开发NI-USRP 可编程性是SDR的关键特性&#xff0c;它使人们能够将无线电外围设备转换为先进的无线系统。USRP是市场上最开放、最通用的SDR&#xff0c;可帮助工程师在主机和FPGA上使用各种软件开发工具构建系统。 有多种选项可用于对基于SDR的系统的主机进行编程。…...

ES6中实现继承

本篇文章主要说明在ES6中如何实现继承&#xff0c;学过java的小伙伴&#xff0c;对class这个关键字应该不陌生&#xff0c;ES6中也提供了class这个关键字作为实现类的语法糖&#xff0c;咱们一起实现下ES6中的继承。 实现思路 首先直接通过class来声明一个Teacther类&#xff…...

车载通信架构 —— 新车载总线类型下(以太网)的通信架构

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 屏蔽力是信息过载时代一个人的特殊竞争力&#xff0c;任何消耗你的人和事&#xff0c;多看一眼都是你的不…...

ArkTS - HarmonyOS服务卡片(创建)

可以参考官网文档 其中我们在已有的文件中File > New > Service Widget创建你想要的小卡片 本文章发布时目前可使用的模板就三种 有卡片后的new 最终效果...

Zotero在word中插入带超链接的参考文献/交叉引用/跳转参考文献

Zotero以其丰富的插件而闻名&#xff0c;使用起来十分的带劲&#xff0c;最重要的是它是免费的、不卡顿&#xff0c;不像某专业软件。 然而Zotero在word插入参考文献时&#xff0c;无法为参考文献添加超链接&#xff0c;这是一个不得不提的遗憾。 不过&#xff0c;有大佬已经…...

持续集成部署-k8s-配置与存储-配置管理:ConfigMap 的热更新

ConfigMap 的热更新 1. 简介2. 新建 Pod3. 使用 edit 命令编辑修改4. 使用 replace 命令替换修改1. 简介 在 Kubernetes 中,ConfigMap 是用于存储非敏感配置数据的 API 对象,它可以被挂载到 Pod 中作为文件或环境变量。ConfigMap 的热更新指的是在不重启 Pod 的情况下,动态…...

Python文本段落翻译

Python文本段落翻译 1、Translate库2、基本使用 1、Translate库 translate非标准库是Python中可以实现对多种语言进行互相翻译的库&#xff0c;translate可以将原始文本或段落翻译成我们需要的目标语言 translate支持多种语言&#xff0c;常见的例如&#xff1a; zh/zh-CN&…...

Flink(七)【输出算子(Sink)】

前言 今天是我写博客的第 200 篇&#xff0c;恍惚间两年过去了&#xff0c;现在已经是大三的学长了。仍然记得两年前第一次写博客的时候&#xff0c;当时学的应该是 Java 语言&#xff0c;菜的一批&#xff0c;写了就删&#xff0c;怕被人看到丢脸。当时就想着自己一年之后&…...

【自我管理】To-do list已过时?学写Done List培养事业成功感

自我管理&#xff1a;已完成清单&#xff08;doneList&#xff09;培养事业成功感 待办事项清单常常让人感到压力山大&#xff0c;让人不想面对工作。但是&#xff0c;你知道吗&#xff1f;除了待办清单之外&#xff0c;还有一个叫做「已完成清单」的东西&#xff0c;它可能更符…...

优思学院|什么是精益生产管理?从一个生活上的故事出发来说明。

你关掉电脑&#xff0c;离开办公室。 一个小时后&#xff0c;你进入家门和孩子们在一起。 你和家人一起吃晚饭。 你的老板打电话来查看你的项目进展。 你哄孩子入睡并给他们读个故事。 作为一个负责任的父母&#xff0c;你想要与孩子们的互动时间增加并提高生活的质量&…...

Swagger-----knife4j框架

简介 使得前后端分离开发更加方便&#xff0c;有利于团队协作 接口的文档在线自动生成&#xff0c;降低后端开发人员编写接口文档的负担 功能测试 Spring已经将Swagger纳入自身的标准&#xff0c;建立了Spring-swagger项目&#xff0c;现在叫Springfox。通过在项目中引入Spri…...

企业数字化过程中数据仓库与商业智能的目标

当前环境下&#xff0c;各领域企业通过数字化相关的一切技术&#xff0c;以数据为基础、以用户为核心&#xff0c;创建一种新的&#xff0c;或对现有商业模式进行重塑就是数字化转型。这种数字化转型给企业带来的效果就像是一次重构&#xff0c;会对企业的业务流程、思维文化、…...

BGE-Reranker-v2-m3批量处理优化:提升高并发排序效率

BGE-Reranker-v2-m3批量处理优化&#xff1a;提升高并发排序效率 你是不是也遇到过这样的问题&#xff1f;在搭建RAG系统时&#xff0c;向量检索返回了一大堆文档&#xff0c;但真正相关的却没几个。大模型拿着这些“噪音”文档生成答案&#xff0c;结果要么答非所问&#xff…...

P1061 Jam 的计数法【洛谷算法习题】

P1061 Jam 的计数法 网页链接 P1061 Jam 的计数法 题目描述 Jam 是个喜欢标新立异的科学怪人。他不使用阿拉伯数字计数&#xff0c;而是使用小写英文字母计数&#xff0c;他觉得这样做&#xff0c;会使世界更加丰富多彩。 在他的计数法中&#xff0c;每个数字的位数都是相…...

深大计算机考研复试全流程避坑指南:从机试环境、酒店选择到体检时机,这些细节别忽略

深大计算机考研复试全流程避坑指南&#xff1a;从机试环境到行程管理的实战策略 站在深大计算机楼前的那一刻&#xff0c;我才真正理解"细节决定成败"的含义——隔壁考场的同学因为酒店空调噪音彻夜未眠&#xff0c;机试时手指发抖敲错关键符号&#xff1b;而提前三个…...

Java八股文实战:从cv_resnet101模型服务理解RPC与序列化

Java八股文实战&#xff1a;从cv_resnet101模型服务理解RPC与序列化 你是不是也遇到过这种情况&#xff1f;面试时被问到“RPC和HTTP有什么区别&#xff1f;”、“序列化协议怎么选&#xff1f;”&#xff0c;脑子里全是书本上的概念&#xff0c;什么“远程过程调用”、“轻量…...

如何免费完成专业定性数据分析:QualCoder终极指南

如何免费完成专业定性数据分析&#xff1a;QualCoder终极指南 【免费下载链接】QualCoder Qualitative data analysis for text, images, audio, video. Cross platform. Python 3.8 or newer and PyQt6. 项目地址: https://gitcode.com/gh_mirrors/qu/QualCoder 你是否…...

关于我使用MinMix创建了一个Tailwindcss学习网站

一、语言特性&#xff1a;Java 26 与模式匹配进化 1.1 Java 26 语言级别支持 IDEA 2026.1 EAP 最引人注目的变化之一&#xff0c;就是新增 Java 26 语言级别支持。这意味着开发者可以提前体验和测试即将在 JDK 26 中正式发布的语言特性。 其中最重要的变化是对 JEP 530 的全…...

PyTorch 2.8镜像多场景落地:从Diffusers文生视频到Transformers微调全流程

PyTorch 2.8镜像多场景落地&#xff1a;从Diffusers文生视频到Transformers微调全流程 1. 开箱即用的深度学习环境 PyTorch 2.8深度学习镜像基于RTX 4090D 24GB显卡和CUDA 12.4深度优化&#xff0c;为各类AI任务提供稳定高效的运行环境。这个镜像最吸引人的特点是它的"万…...

Linux服务器安全升级:5分钟搞定Google Authenticator+SSH双因素认证(附应急码管理技巧)

Linux服务器极简安全升级&#xff1a;Google Authenticator与SSH双因素认证实战指南 当你还在为服务器密码泄露风险辗转反侧时&#xff0c;全球已有超过80%的企业级系统采用双因素认证作为基础防护。但传统方案往往让运维新手望而却步——直到Google Authenticator遇上SSH&…...

Qwen3-Reranker-0.6B部署教程:对接Weaviate向量数据库Hybrid Search集成

Qwen3-Reranker-0.6B部署教程&#xff1a;对接Weaviate向量数据库Hybrid Search集成 你是不是也遇到过这样的问题&#xff1f;用向量数据库做检索&#xff0c;明明搜出来一堆结果&#xff0c;但排在前面的总感觉不是最想要的。传统的向量相似度搜索&#xff0c;有时候就是差那…...

Java伪终端完全实战:如何用pty4j实现跨平台命令行交互

Java伪终端完全实战&#xff1a;如何用pty4j实现跨平台命令行交互 【免费下载链接】pty4j Pty for Java 项目地址: https://gitcode.com/gh_mirrors/pt/pty4j 在Java应用中集成命令行交互功能&#xff0c;你是否曾面临跨平台兼容性差、进程管理复杂、终端控制能力有限等…...