ElementUI中树形表格下拉卡死的问题解决

news2024/11/25 18:36:13

文章目录

  • 错误现象与描述:
  • 代码案例:

错误现象与描述:

最近在修改一个前端的问题,发现后台返回给前端有数据,SQL查询也很快,但是就是前端的表格这里一直卡死,后来发现其他数据正常,其中一行卡死。随后经过数据库排查发现,返回了一条空数据给前端。而row-key就是数据库返回的id。这里el-table的row-key要求是非空的。所以会报错卡死。
在这里插入图片描述

代码案例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ELEMENT UI TREE TABLE</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <template>
            <div>
                <el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column prop="date" label="日期" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </div>
        </template>
    </div>
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                tableData1: [{
                    id: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    hasChildren: true
                }, {
                    id: 2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    id: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    hasChildren: true
                }, {
                    id: 4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄',
                }]
            },
            methods: {
                load(tree, treeNode, resolve) {
                    console.log(tree)
                    setTimeout(() => {
                        if (tree.id === 1) {
                            // 这里模拟后台返回的错误空数据
                            resolve([{
                                id: null,
                                date: null,
                                name: null,
                                address: null
                            }, ])
                        } else {
                            resolve([{
                                    id: 31,
                                    date: '2016-05-01',
                                    name: '王小虎',
                                    address: '上海市普陀区金沙江路 1519 弄'
                                },
                                {
                                    id: 32,
                                    date: '2016-05-01',
                                    name: '王小虎',
                                    address: '上海市普陀区金沙江路 1519 弄'
                                },
                            ])
                        }
                    }, 1000)
                },
            }
        });
    </script>
</body>

</html>

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

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

相关文章

【代码随想录】343. 整数拆分

343. 整数拆分 动态规划五部曲 1. 确定dp数组以及下标的含义 dp[i]&#xff1a;分拆数字i&#xff0c;可以得到的最大乘积为dp[i]。 2. 确定递推公式 其实可以从1遍历j&#xff0c;然后有两种渠道得到dp[i]. 一个是j * (i - j) 直接相乘。 一个是j * dp[i - j]&#xff0c;相…

文本向量化

1、one-hot 在one-hot里面每一个token用一个长度为N向量表示&#xff0c;N表示的是词典的数据量。&#xff08;不重复的词数量&#xff09; 缺点&#xff1a;维度太高&#xff0c;用稀疏向量表示文本。 2、word embedding 使用float的矩阵来表示token&#xff0c;根据词典的…

Qt环境生成dump文件解决程序异常崩溃以及生成日志文件

一、背景 1、在测试自己的项目代码过程 ① 程序的编译的时候没有报错&#xff0c;程序在Qt release模式下运行程序&#xff0c;程序运行五个小时后异常退出&#xff0c;The process was ended forcefully&#xff1b;② 以及在项目程序通过windeployqt 工具打包发布的程序&am…

用最简单的方式告诉你什么是集线器、交换机、路由器

欢迎来到东用知识小课堂&#xff01;某一天&#xff0c;你到你女友小芳(暂定这个名字吧)就读的学校去找她&#xff0c;那么你的做法是什么呢&#xff1a;一、集线器的工作方式&#xff1a;你站到学校中庭&#xff0c;大喊一声“小芳&#xff0c;我来你找你了!”(广播)如果这个时…

〖百宝书-思维锻炼①〗——思维进阶和升华

大家好&#xff0c;我是涵子&#xff0c;欢迎大家今天进入了新专题&#xff1a;百宝书-思维锻炼&#xff01; &#x1f4ac; 人生格言&#xff1a;Stay foolish, stay kind.&#x1f4ac; &#x1f4eb; 如果文章知识点有错误的地方&#xff0c;请指正&#xff01;和大家一起学…

SpringSecurity随笔(2)-OAuth2协议

短信登录 参考密码登录过程 1.编写短信登录过滤器&#xff0c;验证短信验证码 2.编写未认证得SmsAuthenticationToken 3.将未认证的SmsAuthenticationToken传递给AuthenticationManager 4.编写一个SmsAuthenticationProvider 5.调用UserDetialsService获取用户信息 OAuth协议…

【Linux杂篇】经常登录Linux,用户密码背后的知识了解一下

一&#xff0c;用户密码存放在哪里&#xff1f; 说到这个问题&#xff0c;绝大部分的同学肯定都知道/etc/passwd这个文件&#xff0c;不错&#xff0c;这个文件里存储的就是用户名&#xff0c;密码等信息。 每一行都是一个account&#xff0c;每一行有7个信息&#xff0c;分…

在农业银行做开发是什么样的体验?

本文已经收录到Github仓库&#xff0c;该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点&#xff0c;欢迎star~ Github地址&#xff1a;https://github.com/…

MySQL环境搭建

文章目录1. MySQL的卸载步骤1&#xff1a;停止MySQL服务步骤2&#xff1a;软件卸载步骤3&#xff1a;残余文件的清理步骤4&#xff1a;清理注册表步骤5&#xff1a;删除环境变量配置2. MySQL的下载、安装、配置MySQL的4大版本软件的下载MySQL8.0 版本的安装配置MySQL8.0配置MyS…

超详解通讯录,保姆式教学 ,轻松学会实现通讯录的功能【c语言】

文章目录静态通讯录Contact.htest.c菜单的创建Contact.c初始化通讯录InitContact的实现增加联系人AddContact的实现查找指定联系人的信息SearchContact的实现删除指定联系人DelContact的实现修改指定联系人的信息ModifyContact的实现显示所有联系人的信息ShowContact的实现完整…

vite项目为什么可以直接使用NODE_ENV?

背景 我们知道&#xff0c;在process.env中并没有NODE_ENV这个变量&#xff0c;但是我们却可以在项目的代码中使用process.env.NODE_ENV这个值来判断当前是development环境还是production环境&#xff0c;然后进行后续的逻辑操作。 这说明&#xff0c;在vite内部&#xff0c;…

大数据面试题集锦-Hadoop面试题(二)-HDFS

你准备好面试了吗?这里有一些面试中可能会问到的问题以及相对应的答案。如果你需要更多的面试经验和面试题&#xff0c;关注一下"张飞的猪大数据分享"吧&#xff0c;公众号会不定时的分享相关的知识和资料。 1、 HDFS 中的 block 默认保存几份&#xff1f; 默认保存…

MacBook Pro外接显示器竖屏显示

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3;哈喽&#xff01;大家好&#xff0c;我是「奇点」&#xff0c;江湖人称 singularity。刚工作几年&#xff0c;想和大家一同进步&#x1f91d;&#x1f91d;一位上进心十足的【Java ToB端大厂领…

接口性能测试避坑 Django+Nginx+uwsgi接口性能调优postman Apifox ab

Django开发了个接口供外部调用&#xff0c;Django的并发性能弱早有所闻&#xff0c;所以采用DjangoNginxuwsgi架构来提高并发量。然后使用测试工具测试并发量。服务器配置&#xff1a;CPU 2&#xff0c;内存8G接口内容只有3句&#xff1a;request_data {"code":&quo…

MyBatis复习

本文章根据尚硅谷MyBatis教程整理而来 原视频地址&#xff1a;https://www.bilibili.com/video/BV1VP4y1c7j7 MyBatis简介 MyBatis历史 MyBatis最初是Apache的一个开源项目iBatis, 2010年6月这个项目由Apache Software Foundation迁 移到了Google Code。随着开发团队转投Goo…

力扣刷题记录——521. 最长特殊序列 Ⅰ、541. 反转字符串 II、557. 反转字符串中的单词 III

本专栏主要记录力扣的刷题记录&#xff0c;备战蓝桥杯&#xff0c;供复盘和优化算法使用&#xff0c;也希望给大家带来帮助&#xff0c;博主是算法小白&#xff0c;希望各位大佬不要见笑&#xff0c;今天要分享的是——《521. 最长特殊序列 Ⅰ、541. 反转字符串 II、557. 反转字…

PhotoZoom Pro8全新版本功能介绍及系统要求

PhotoZoom 2023&#xff08;PhotoZoom 8&#xff09;全新版本震撼来袭。 一款划时代的、技术上产生革命性影响的数码图片放大工具。 我们获取图片的方法&#xff0c;一般是从度娘图片和各个图库里找素材。但一般网上搜索到的很多图片像素都非常小&#xff0c;普通方法放大就像打…

修改配置文件的定时任务

1.问题背景 下发文件给下游系统设置的是定时任务&#xff0c;原本是每天的18&#xff1a;08定时发送&#xff0c;突然下游说要立马发送&#xff0c;于是只能去修改定时任务。 2.修改操作 查看权限—修改权限—备份–修改—重启 查看权限 进入配置文件目录&#xff1a;cd /…

分享77个HTMLCSS源码,总有一款适合您

HTML&CSS源码 分享77个HTML&CSS源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c;大家下载后可以看到。 源码下载链接&#xff1a;https://pan.baidu.com/s/1QRSokzVy2ZAaSD6VR…

DataGear 4.4.0 发布,数据可视化分析平台

DataGear 4.4.0 发布&#xff0c;带来看板新特性&#xff0c;具体更新内容如下&#xff1a; 新增&#xff1a;看板新增dg-chart-manual-render属性&#xff0c;用于控制是否手动渲染图表&#xff1b;新增&#xff1a;看板dg-dashboard-code属性新增"instance"值&…