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

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

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.kler.cn/a/135911.html

相关文章:

  • leetcode之hot100---240搜索二维矩阵II(C++)
  • 【学习记录】浏览器指纹相关学习记录(指纹介绍、获取指纹、修改指纹、随机指纹保护隐私等)
  • MySQL -- 库的相关操作
  • LNMP 平台构建与应用全析:深度总结与展望
  • JavaWeb期末复习(习题)
  • ExcelVBA编程输出ColorIndex与对应颜色色谱
  • C语言——2.安装并使用VS
  • 力扣刷题-二叉树-二叉树的高度与深度
  • 搭建网关服务器实现DHCP自动分配、HTTP服务和免密登录
  • 【数据结构(三)】单向环形链表和约瑟夫问题(3)
  • trzsz支持文件拖动到终端进行上传,类似lrzsz
  • 后端返回 date 时间日期格式为 UTC 格式字符串,形如 2022-08-11T10:50:31.050+00:00前端如何修改为yyyy-mm-dd
  • 公司电脑文件透明加密、防泄密管理软件系统
  • ASP.NET限流器的简单实现
  • 贝锐蒲公英路由器X4C如何远程访问NAS?
  • 面试官:你能说说常见的前端加密方法吗?
  • 基于单片机16路抢答器仿真系统
  • Ubuntu 22.04安装Rust编译环境并且测试
  • 【运维篇】Redis常见运维命令详解
  • 数据处理生产环境_利用MurmurHash3算法在Spark和Scala中生成随机颜色
  • 今天遇到Windows 10里安装的Ubuntu(WSL)的缺点
  • 搜索引擎ElasticSearch分布式搜索和分析引擎学习,SpringBoot整合ES个人心得
  • 【Linux 源码阅读记录】设备树解析 of 相关代码
  • idea显示pom.xml文件漂黄警告 Dependency maven:xxx:xxx is vulnerable
  • Jenkins自动化部署(虚拟机部署)
  • openssl + 3DES开发实例(linux)