解决expand-change第一次展开无数据显示与实现

  • 最近写需求时用到了expand-change表格展开回调,但我发现第一次展开后并没有展示任何数据,但我的返回值是存在的,当第二次展开时发现数据就有了。此原因是因为获取数据的接口是异步的,导致Dom渲染不同步导致的,其实解决办法也很简单,只需在外层的表格列表中的每一个数组对象加一个空数据作为默认展示即可
1 . 解决expand-change第一次展开无数据显示问题
  • 首先:定义好需要展示的数据并设置type="expand"展开子表格,用expand-change来获取当前行展开回调,设置row-key防止数据混乱(这个要加上不然,展开行又自己合上了)
<template><el-table :data="tableData" @expand-change="handleExpand" :border="parentBorder" style="width: 100%"><el-table-column type="expand"><template #default="props"><div m="4"><p m="t-0 b-2">State: {{ props.row.number || '' }}</p><p m="t-0 b-2">City: {{ props.row.chargeTime || '' }}</p><p m="t-0 b-2">Address: {{ props.row.serverAmount|| '' }}</p><h3>Family</h3><el-table :data="props.row.family" :border="childBorder"><el-table-column label="Name" prop="name" /><el-table-column label="State" prop="state" /><el-table-column label="City" prop="city" /><el-table-column label="Address" prop="address" /><el-table-column label="Zip" prop="zip" /></el-table></div></template></el-table-column><el-table-column label="Date" prop="date" /><el-table-column label="Name" prop="name" /></el-table>
</template><script lang="ts" setup>
import { ref } from 'vue'const parentBorder = ref(false)
const childBorder = ref(false)
const tableData = [{date: '2016-05-03',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',},{date: '2016-05-02',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',},{date: '2016-05-04',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',},
]// 展开某行详情
const handleExpand = async (item, expandedRows) => {if (!item.expand) {const detail = await api.front.remoteConfig.getBillDetail({ number: item.number })item.number = detail.numberitem.chargeTime = detail.chargeTimeitem.serverAmount = detail.serverAmountitem.expand = true}
}
</script>

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

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

相关文章

Ubuntu24.04 Isaacgym的安装

教程1 教程2 教程3 1.下载压缩包 link 2. 解压 tar -xvf IsaacGym_Preview_4_Package.tar.gz核心教程在 isaacgym/docs/install.html下 3. 从源码安装 Ubuntu24.04还需首先进入虚拟环境 python -m venv myenv # 创建虚拟环境&#xff0c;已有可跳过 source myenv/bin/a…

Redis持久化详解

【关闭文件、AOF 刷盘、释放内存这三个任务都有各自的任务队列】所以不是单线程 Redis有两种持久化方案&#xff1a; RDB持久化 AOF持久化 基于Redis集群解决单机Redis存在的问题 【Redis是单进程的】 【也有人做分布式section】 【主从集群中多个从就是做负载均衡的】 …

如何在Java中实现函数式编程

如何在Java中实现函数式编程 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java中&#xff0c;函数式编程是一种编程范式&#xff0c;它将计算视为数学函数…

在Linux系统中查找并计数正在运行的ffmpeg进程数量

ps aux | grep "ffmpeg" | grep -v "grep" | wc -l 这条命令是一个组合命令&#xff0c;用于在Linux系统中查找并计数正在运行的ffmpeg进程数量&#xff0c;同时排除了搜索命令本身&#xff08;即grep "ffmpeg"&#xff09;的干扰。下面是对每个…

Java识别图片中的二维码

引入依赖 <dependency><groupId>org.bytedeco</groupId><artifactId>javacv</artifactId><version>1.5.10</version> </dependency><dependency><groupId>org.bytedeco</groupId><artifactId>javacp…

while陈述

回圈是用来进行进行重复性的工作&#xff0c;典型的回圈会进行下列三项基本任务 1. 控制变数初始设定2. 回圈结束条件测试3. 调整控制变数的值 关键字 while构成C 中回圈的一种&#xff0c;常用于没有确定重复次数的回圈&#xff0c;同时while后面接着小括弧为回圈结束的条件…

上位机第二弹

之前写的代码用上了 现在想想 &#xff0c;北向一侧还挺难搞&#xff0c;设计很巧妙

Continual Test-Time Domain Adaptation--论文笔记

论文笔记 资料 1.代码地址 https://github.com/qinenergy/cotta 2.论文地址 https://arxiv.org/abs/2203.13591 3.数据集地址 论文摘要的翻译 TTA的目的是在不使用任何源数据的情况下&#xff0c;将源预先训练的模型适应到目标域。现有的工作主要考虑目标域是静态的情况…

python - 列表 / 元组 / 字符串

一.列表 由于pyhon的变量没有数据类型&#xff0c;所以python是没有数组的&#xff08;因为数组只能存放一种类型&#xff0c;要么全部存放整型&#xff0c;要么全部存放浮点型&#xff09;&#xff0c;只有列表list&#xff0c;所以整数&#xff0c;浮点数&#xff0c;字符串…

传输线阻抗匹配电阻端接的方式

电路为什么需要端接&#xff1f; 众所周知&#xff0c;电路中如果阻抗不连续&#xff0c;就会造成信号的反射&#xff0c;引起上冲下冲、振铃等信号失真&#xff0c;严重影响信号质量。所以在进行电路设计的时候阻抗匹配是很重要的考虑因素。 对我们的PCB走线进行阻抗控制已经…

双指针系列第 8 篇:盛水最多的容器。几句话讲明白!

Leetcode 题目链接 思路 取首尾双指针和水量如下所示&#xff0c;设高度函数为 h ( i ) h(i) h(i)&#xff0c;在下图中 h ( l ) < h ( r ) h(l) < h(r) h(l)<h(r)。 观察以 l l l 为左边界所能构成的其他水量&#xff0c;与矮的右边界搭配结果如下。 与高的…

jdk17卸载后换jdk1.8遇到的问题

过程&#xff1a; 1、找到jdk17所在文件夹&#xff0c;将文件夹进行删除。&#xff08;问题就源于此&#xff0c;因为没删干净&#xff09; 2、正常下载jdk1.8&#xff0c;按照网上步骤配置环境变量&#xff0c;这里我参考的文章是&#xff1a; http://t.csdnimg.cn/Svblk …

【RT摩拳擦掌】如何构建RT AVB switchendpoint平台

【RT摩拳擦掌】如何构建RT AVB switch&endpoint平台 一&#xff0c;文档简介二&#xff0c;平台构建2.1 软硬件情况2.2 配置RT1170 AVB端点2.2.1 1块MIMXRT1170开发板做talker配置2.2.2 2块MIMXRT1170开发板做listener配置 2.3 AVB Switch 配置2.3.1 MOTU AVB Switch2.3.2 …

未来的钥匙在于过去:学历史的真正意义,震惊!历史竟然是偶然的?从历史中寻找未来的方向!

我们自幼接受的教育是&#xff0c;学历史是为了相信历史是必然的。中国人民必然战胜日寇的侵略&#xff0c;解放思想和改革开放必定会发生&#xff0c;和平和发展必定是世界的主题&#xff0c;中国经济必定是高速增长…… 然而&#xff0c;在真正的历史学家眼中&#xff0c;历史…

linux应用开发基础知识(八)——内存共享(mmap和system V)

mmap内存映射 内存共享定义 内存映射&#xff0c;简而言之就是将用户空间的一段内存区域映射到内核空间&#xff0c;映射成功后&#xff0c;用户对这段内存区域的修改可以直接反映到内核空间&#xff0c;同样&#xff0c;内核空间对这段区域的修改也直接反映用户空间。那么对…

海外注册 | 欧盟医疗器械法规下免除临床试验的条件与要求

在欧盟医疗器械法规&#xff08;MDR&#xff09;的严格监管下&#xff0c;植入性医疗器械和III类医疗器械通常需要进行临床试验来证明其安全性和性能。 然而&#xff0c;MDR也规定了一些特定情况下免除临床试验的可能性。以下是免除临床试验的条件和要求的详细说明&#xff1a…

MVC(Model-View-Controller)模式

MVC&#xff08;Model-View-Controller&#xff09;模式三个主要组件&#xff1a;模型&#xff08;Model&#xff09;&#xff0c;视图&#xff08;View&#xff09;&#xff0c;和控制器&#xff08;Controller&#xff09;&#xff1a; 模型&#xff08;Model&#xff09;&a…

【高中数学/基本不等式】已知:a,b皆为正数,且1/(2a+b)+1/(a+2b)=1 求:a+b的最小值?

【问题来源】 https://www.ixigua.com/7025123539728466469?logTag1c2fd2e305d60e6277ab 第二题 【问题】 已知&#xff1a;a,b皆为正数&#xff0c;且1/(2ab)1/(a2b)1 求&#xff1a;ab的最小值&#xff1f; 【解答】 解&#xff1a;此题也有分母难消的问题&#xff…

人口萎缩,韩国釜山“进入消失阶段”

KlipC报道&#xff1a;调查显示&#xff0c;随着低生育率和人口老化&#xff0c;釜山人口逐渐萎缩&#xff0c;韩国第二大城市釜山显现出“进入消失阶段”的迹象。 据悉&#xff0c;“消失风险指数”是将20岁至39岁女性人口总数除以65岁及以上人口得到的数值。当该指数大于1.5…

自然语言处理学习(2)基本知识 文本预处理+文本数据分析+文本增强

conda activate DL conda deactivate课程链接 一 一些包的安装 1 stanfordcorenlp 在anoconda prompt 里面&#xff1a;进入自己的conda环境&#xff0c;pip install stanfordcorenlp 进入方式 相关包下载&#xff0c;Jar包我没有下载下来&#xff0c;太慢了&#xff0c;这个…