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

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.mzph.cn/news/152153.shtml

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

相关文章

JDK,JRE,JVM之间的区别和联系

JDK&#xff0c;JRE&#xff0c;JVM之间的区别和联系 JDK(Java SE Development Kit),Java标准开发包&#xff0c;它提供了编译、运行Java程序所需的各种工具和资源&#xff0c;包括Java编译器、Java运行时环境&#xff0c;以及常用的Java类库等。JRE( Java Runtime Enwironment…

从哪些方面分析Linux内核源码

从这些方面分析Linux内核源码&#xff0c;这里提供一个大致的大纲&#xff1a; 一、Linux内核源码概述 1. 什么是Linux内核&#xff1f; 2. Linux内核的主要功能 3. Linux内核的版本控制 4. Linux内核的组织结构 二、Linux内核编译与配置 1. 获取Linux内核源码 2. 安装…

Hive常见的面试题(十二道)

Hive 1. Hive SQL 的执行流程 ⾸先客户端通过shell或者Beeline等⽅式向Hive提交SQL语句,之后sql在driver中经过 解析器&#xff08;SQL Parser&#xff09;&#xff1a;将 SQL 字符串转换成抽象语法树 AST&#xff0c;这一步一般都用第三方工具库完成&#xff0c;比如 ANTLR&…

SQL单表复杂查询where、group by、order by、limit

1.1SQL查询代码如下&#xff1a; select job as 工作类别,count(job) as 人数 from tb_emp where entrydate <2015-01-01 group by job having count(job) > 2 order by count(job) limit 1,1where entrydate <‘2015-01-01’ 表示查询日期小于2015-01-01的记录…

【Leetcode合集】2342. 数位和相等数对的最大和

文章目录 2342. 数位和相等数对的最大和方案1方案2方案3方案4 2342. 数位和相等数对的最大和 2342. 数位和相等数对的最大和 代码仓库地址&#xff1a; https://github.com/slience-me/Leetcode 个人博客 &#xff1a;https://slienceme.xyz 给你一个下标从 0 开始的数组 nu…

Git安装与常用命令

Git简介&#xff1a; Git是一个开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或大或小的项目。Git是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源代码的版本控制软件。Git与常用的版本控制工具CVS、Subversion等不同&#xff0c;它采用了分布式…

React 自定义hook 之 防抖和节流

一、简介 防抖和节流主要用于控制事件触发频率&#xff0c;提高页面性能和用户体验。 防抖: 当事件被触发后&#xff0c;在一定时间内有新的对应事件&#xff0c;则会取消老的事件执行。 节流: 当事件触发后&#xff0c;在一定时间内会忽略新的事件执行。 二、技术实现 1、us…

动态改标题

<el-dialog :title"showTitle" :visible"showDialog" close"close"> </el-dialog>使用计算属性 computed: {showTitle() {//这里根据点击的是否有具体点击的那个id来判断return this.form.id ? "编辑部门" : "新增部…

Virtual安装centos后,xshell连接centos 测试及遇到的坑

首先来一张官方的图--各种网络模式对应的连接状况&#xff1a; 1. 网络使用Host-Only模式动态分配IP&#xff0c;点确定后&#xff0c;centos 上运行 system restart network &#xff0c;使用ifconfig查看新的ip&#xff0c;XShell可以直接连上centos&#xff0c; 但是由于使用…

【系统稳定性】1.6 黑屏(三)

五,QNX启动异常 qnx启动异常无疑同样是灾难级的存在。qnx是目前座舱方案中主流的存在,如果qnx存在异常会导致host或la或其他娱乐世界offline。那么导致qnx的原因有很多,相应地,我们也有很多的排查手段。 5.1 以太网连接 座舱方案中目前还是多域的设计,那么多域之间的连…

【总结】坐标变换和过渡矩阵(易忘记)

xCy&#xff0c;此为x到y的坐标变换。 [β1,β2,…,βn] [α1,α2,…αn]C&#xff0c;此为基α到基β的过渡矩阵。 这个概念经常忘记。。。alpha到beta看来就是alpha后面加一个过渡矩阵了&#xff0c;很直观。坐标变换就是根据过渡矩阵和基本形式推一推得到吧&#xff0c;记…

大型 APP 的性能优化思路

做客户端开发都基本都做过性能优化&#xff0c;比如提升自己所负责的业务的速度或流畅性&#xff0c;优化内存占用等等。但是大部分开发者所做的性能优化可能都是针对中小型 APP 的&#xff0c;大型 APP 的性能优化经验并不会太多&#xff0c;毕竟大型 APP 就只有那么几个&…

linux 定时执行脚本

先写一个简单的shell脚本用来测试定时执行脚本 [rootVM-12-12-centos wz]# cat shell_cron_test.sh #!/bin/bashif [ -f "/home/wz/cron_test.txt" ];thennum$(($(wc -l /home/wz/cron_test.txt | cut -d -f 1)1))elsenum1 fi echo "$(date "%y-%m-%d …

你知道STM32和51单片机的区别吗?

你知道STM32和51单片机的区别吗&#xff1f; 51单片机是很经典的一款单片机。事实上很多电信专业本科阶段都会以这个单片机作为入门。最近很多小伙伴找我&#xff0c;说想要一些STM32的资料&#xff0c;然后我根据自己从业十年经验&#xff0c;熬夜搞了几个通宵&#xff0c;精心…

比赛调研资料

视觉文旅 现有的模型 数据 功能 精准营销 基于地理推荐能力 乡村圈分析能力 都市圈分析能力 产品体系 三大数据平台 携程问道 旅游服务框架&#xff1a;前置&#xff08;推荐种草&#xff09;&#xff0c;途中&#xff08;客服&#xff09;&#xff0c;售后&#xff0…

【SpringMvc】SpringMvc +MyBatis整理

&#x1f384;欢迎来到边境矢梦的csdn博文&#x1f384; &#x1f384;本文主要梳理 Java 框架 中 SpringMVC的知识点和值得注意的地方 &#x1f384; &#x1f308;我是边境矢梦&#xff0c;一个正在为秋招和算法竞赛做准备的学生&#x1f308; &#x1f386;喜欢的朋友可以关…

JSP协同办公eclipse定制开发mysql数据库BS模式java编程OA系统

一、源码特点 java 协同办公管理系统是一套完善的web设计系统 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&#xff0c;使…

2023Linux常见命令手册

目录 文件命令 文件和目录命令 文件的权限命令 文件搜索命令 进程命令 查看进程命令 关闭进程命令 用户和群组命令 网络命令 firewall-cmd 网络应用命令 高级网络命令 网络测试命令 网络安全命令 网络配置命令 软件管理命令 系统信息命令 vi编辑器 关机命令…

技术岗位竞业协议规避的坑

​ 前言 技术岗位竞业协议指员工在离开公司后&#xff0c;不能在指定期限内从事与公司业务有竞争关系的工作。 有的公司在入职的时候签订&#xff0c;有的在离职的时候签订&#xff08;更有的公司在工作中途补签&#xff09;&#xff0c;但是要记住&#xff0c;签了就生效了…