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

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,一经查实,立即删除!

相关文章

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;它采用了分布式…

动态改标题

<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; 但是由于使用…

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

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;签了就生效了…

如何修改dpi为300?96dpi怎么改成300dpi?

平时使用的图片dpi一般都是96&#xff0c;但是我们在打印的时候&#xff0c;都要求dpi为300以上&#xff0c;这时候就需要修改图片分辨率&#xff0c;如何改图片分辨率成了一个问题&#xff0c;所以今天就教大家一个图片分辨率提高在线处理的方法&#xff0c;一起来了解一下吧。…

【Java程序员面试专栏 专业技能篇】Java SE核心面试指引(一):基础知识考察

关于Java SE部分的核心知识进行一网打尽,包括四部分:基础知识考察、面向对象思想、核心机制策略、Java新特性,通过一篇文章串联面试重点,并且帮助加强日常基础知识的理解,全局思维导图如下所示 本篇Blog为第一部分:基础知识考察,子节点表示追问或同级提问 基本概念 …

《数据:挖掘价值,洞察未来

大数据&#xff1a;挖掘价值&#xff0c;洞察未来 我们正身处一个数据驱动的时代&#xff0c;大数据已经成为企业和个人决策的重要依据。本文将深入探讨大数据的魅力&#xff0c;挖掘其价值&#xff0c;并洞察未来发展趋势&#xff0c;让我们一起领略大数据的无穷奥秘。 一、大…

开发仿抖音APP遇到的问题和解决方案

uni-app如何引入阿里矢量库图标/uniapp 中引入 iconfont 文件报错文件查找失败 uni-app如何引入阿里矢量库图标 - 知乎 uniapp 中引入 iconfont 文件报错文件查找失败&#xff1a;‘./iconfont.woff?t1673007495384‘ at App.vue:6_宝马金鞍901的博客-CSDN博客 将课件中的cs…

FastJson竟然会导致内存泄露?你遇到过吗?

FastJson是一款性能优异的java序列化和反序列框架&#xff0c;广泛应用于日常开发工作中&#xff0c;也许正是因为作者在设计这款框架时&#xff0c;比较注重性能方面的考量&#xff0c;在框架安全性&#xff0c;空间占用等方面做了一些牺牲。 很不幸小编前两天就遇到了一个使…