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

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

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

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

相关文章

svn问题集

被锁定&#xff0c;无法拉取提交 解决方法

选择java商城开发商需要注意哪些方面?

Java商城开发是一项庞大而复杂的任务&#xff0c;选择一家合适的开发商至关重要。那么&#xff0c;我们在选择Java商城开发商时&#xff0c;需要注意哪些方面呢&#xff1f; 1、专业经验 选择具有丰富经验的开发商是至关重要的。开发商应该拥有多年的Java开发经验&#xff0c;…

【开源】基于Vue.js的衣物搭配系统的设计和实现

项目编号&#xff1a; S 016 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S016&#xff0c;文末获取源码。} 项目编号&#xff1a;S016&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 衣物档案模块2.2 衣物搭配模块2.3 衣…

【数据结构】树与二叉树(廿一):树和森林的遍历——先根遍历(递归算法PreOrder、非递归算法NPO)

文章目录 5.1 树的基本概念5.1.1 树的定义5.1.2 森林的定义5.1.3 树的术语 5.2 二叉树5.3 树5.3.1 树的存储结构1. 理论基础2. 典型实例3. Father链接结构4. 儿子链表链接结构5. 左儿子右兄弟链接结构 5.3.2 获取结点的算法5.3.3 树和森林的遍历1. 先根遍历&#xff08;递归&am…

强化学习笔记

这里写自定义目录标题 参考资料基础知识16.3 有模型学习16.3.1 策略评估16.3.2 策略改进16.3.3 策略迭代16.3.3 值迭代 16.4 免模型学习16.4.1 蒙特卡罗强化学习16.4.2 时序差分学习Sarsa算法&#xff1a;同策略算法&#xff08;on-policy&#xff09;&#xff1a;行为策略是目…

INFINI Labs 产品更新 | 发布 Easysearch Java 客户端,Console 支持 SQL 查询等功能

近年来&#xff0c;日志管理平台越来越流行。使用日志管理平台可以实时地、统一地、方便地管理和查看日志&#xff0c;挖掘日志数据价值&#xff0c;驱动运维、运营&#xff0c;提升服务管理效率。 方案架构 Beats 是轻量级采集器&#xff0c;包括 Filebeat、Metricbeat 等。E…

开发者生态:共享知识,携手共进,共创技术辉煌

开发者生态&#xff1a;共享知识&#xff0c;携手共进&#xff0c;共创技术辉煌 在数字化时代&#xff0c;开发者是推动技术进步和创新的重要力量。他们创造着改变世界的软件和应用&#xff0c;推动着技术的边界不断向前。而在这个快速发展的时代&#xff0c;建立一个健康、活跃…

【Q2—30min】

1.socket服务端创建过程 socket是应用层与TCP/IP协议族通信的中间软件抽象层&#xff0c;它是一组接口。在设计模式中&#xff0c;Socket其实就是一个门面模式&#xff0c;它把复杂的TCP/IP协议族隐藏在Socket接口后面&#xff0c;对用户来说&#xff0c;一组简单的接口就是全部…

mysql面试题——存储引擎相关

一&#xff1a;MySQL 支持哪些存储引擎? MySQL支持多种存储引擎&#xff0c;比如InnoDB&#xff0c;MyISAM&#xff0c; MySQL大于等于5.5之后&#xff0c;默认存储引擎是InnoDB 二&#xff1a;InnoDB 和 MyISAM 有什么区别? InnoDB支持事务&#xff0c;MyISAM不支持InnoD…

前端入门(二)Vue2到Vue3

文章目录 Vue简介Vue的特点Hello, Vue Vue基本语法模板语法数据绑定&#xff08;v-bind、v-model&#xff09;el与data的两种写法 数据代理实现原理Object.defineProperty()数据代理 事件处理&#xff08;v-on:click / click&#xff09;事件修饰符键盘事件&#xff08;略&…

思伟老友记 | 厦门路桥翔通海砼建材有限公司与思伟软件携手走过23年

23年 感恩相伴 携手成长 2001年-2023年&#xff0c;厦门路桥翔通海砼建材有限公司已携手上海思伟软件有限公司走过23年。从最初的半手动生产模式到如今的自动生产一体化系统&#xff0c;海砼公司通过思伟软件生产混凝土累计超过1000万m&#xff0c;思伟软件则借助海砼公司的实…

C语言——函数的嵌套调用

#define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h>void new_line() {printf("Hello\n"); }void three_line() {int i0;for(i0;i<3;i){new_line();} }int main() {three_line();return 0; }

测试用例的设计方法(全):正交实验设计方法|功能图分析方法|场景设计方发

正交实验设计方法 一.方法简介 利用因果图来设计测试用例时, 作为输入条件的原因与输出结果之间的因果关系,有时很难从软件需求规格说明中得到。往往因果关系非常庞大,以至于据此因果图而得到的测试用例数目多的惊人&#xff0c;给软件测试带来沉重的负担&#xff0c;为了有效…

Vue3 常用组件

一、Fragment组件 Vue2 的template 模板中必须要有一个根标签&#xff0c;而我们在Vue3 的模板中不需要使用根标签就能渲染&#xff0c;因为Vue3 在内部会将多个标签包含在一个Fragment 虚拟元素中。 好处就在于可以减少标签的层级&#xff0c;减小内存占用。 二、Teleport组…

基于ResNet框架的CNN

数据准备 DATA_URL http://download.tensorflow.org/example_images/flower_photos.tgz 一、训练集和验证集的划分 #spile_data.pyimport os from shutil import copy import randomdef mkfile(file):if not os.path.exists(file):os.makedirs(file)file flower_data/flower…

YOLO目标检测——无人机航拍行人检测数据集下载分享【含对应voc、coc和yolo三种格式标签】

实际项目应用&#xff1a;智能交通管理、城市安防监控、公共安全救援等领域数据集说明&#xff1a;无人机航拍行人检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富标签说明&#xff1a;使用lableimg标注软件标注&#xff0c;标注框质量高&#xff0c;…

whisper使用方法

看这个 github https://github.com/Purfview/whisper-standalone-win/tags下载 视频提取音频 ffmpeg -i 222.mp4 -vn -b:a 128k -c:a mp3 output.mp3截取4秒后的音频 ffmpeg -i output.mp3 -ss 4 -c copy output2.mp3使用 whisper-faster.exe 生成字幕 whisper-faster.exe …

基于水基湍流算法优化概率神经网络PNN的分类预测 - 附代码

基于水基湍流算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于水基湍流算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于水基湍流优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…

游戏报错d3dcompiler_47.dll缺失怎么修复,总结多种修复方法

在使用这些软件和游戏的过程中&#xff0c;我们常常会遇到一些问题&#xff0c;其中之一就是d3dcompiler_47.dll丢失的问题。这个问题可能会导致软件或游戏无法正常运行&#xff0c;给用户带来困扰。本文将详细介绍解决软件游戏d3dcompiler_47.dll丢失的方法&#xff0c;帮助您…

读懂:“消费报销”模式新零售打法,适用连锁门店加盟的营销方案

读懂&#xff1a;“消费报销”模式新零售打法&#xff0c;适用连锁门店加盟的营销方案 引言&#xff1a;2023年的双十一已经落下帷幕&#xff0c;作为每年的经典电商促销节&#xff0c;今年已是第15个年头&#xff0c;但是今年各大电商平台却都是非常默契的&#xff0c;没有公布…