iview Cascader 组件动态数据回显

news2024/12/28 12:38:27

在使用Cascader组件动态加载数据后,编辑的时候回显会有问题
问题如下:回显的时候,如果是多级,只显示了一级且,中间会闪一下
在这里插入图片描述
经过多方查找资料发现,是callback造成的。给组件增加on-visible-change事件监听展开和关闭弹窗时的状态,如果弹窗是展开的就callback,否则不需要callback,问题解决。
在这里插入图片描述

代码如下

<FormItem label="所属类别" prop="hasCategoryId">
  <Cascader
    v-model="form.hasCategoryId"
    :data="categoryData"
    :load-data="loadTreeList"
    change-on-select
    @on-visible-change="handleVisibleChange"
  />
</FormItem>
// 监听Cascader级联组件是否展开
handleVisibleChange (value) {
  this.visibleCascader = value
},
// 初始化Cascader级联组件数据
getTreeList () {
  getTreeList().then(res => {
    this.categoryData = res
  })
},
// 动态加载Cascader级联组件子数据
loadTreeList (item, callback) {
  item.loading = true
  getTreeList({ broader: item.value }).then(res => {
    item.loading = false
    item.children = res
    if (this.visibleCascader) {
      callback()
    }
  })
},

如果有更好的办法欢迎留言讨论

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

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

相关文章

如何下载淘宝的主图视频

目录&#xff1a; 1、通过插件插件下载短视频 1&#xff09;获取“Microsoft Edge扩展” 2&#xff09;搜索“aix智能下载器” 3&#xff09;将插件钉在浏览器上 4&#xff09;嗅控并下载视频 2、从其他来源安装插件 1、通过插件插件下载短视频 1&#xff09;获取“M…

孙宇晨:以区块链科技为翼,青年企业家引领社会进步新航向

​ 孙宇晨&#xff0c;作为区块链领域的一位青年企业家&#xff0c;以其大胆的创新精神和卓越的远见&#xff0c;正在用区块链技术推动社会的进步。他不仅在加密货币和区块链技术领域取得了令人瞩目的成就&#xff0c;还通过不断的努力&#xff0c;致力于将这些技术应用…

FreeRTOS 列表 List 源码解析

目录 一、链表及链表项的定义1、链表节点数据结构 xList_ITEM2、链表精简节点结构 xMINI_LIST_ITEM3、链表根节点结构 xLIST 二、链表的相关操作1、初始化1.1 链表节点初始化1.2 链表根节点初始化 2、插入2.1 将节点插入到链表的尾部2.2 将节点按照升序排列插入到链表 3、删除4…

(go)线性表的顺序存储

闲来无事&#xff0c;更新一下&#xff0c;线性表的顺序存储&#xff0c;go语言版本&#xff0c;效果都已经测试过&#xff0c;下面给出各部分细节 文章目录 1、生成一个线性表2、查找3、插入4、求长度5、改值6、删除7、遍历8、测试程序9、完整代码总结 package mainimport &q…

VBA技术资料MF195:屏蔽工作表中的粘贴输入

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

关于测试工程师在性能测试工具jmeter的熟悉和精通

经过一周的jmeter接口编写&#xff0c;不不不&#xff0c;是一年1-2次的jmeterd 使用&#xff0c;每次都是新的发现&#xff0c;新的起点&#xff01;&#xff01; 去年10月学习过的东西&#xff0c;现在还是不记得当时怎么这么聪明&#xff0c;于是&#xff0c;每次都是0基础…

笔试训练,牛客.合唱团牛客.kannan与高音牛客.拜访(BFS)牛客.买卖股票的最好时机(四)

目录 牛客.合唱团 牛客.kannan与高音 牛客.拜访&#xff08;BFS&#xff09; 牛客.买卖股票的最好时机(四) 牛客.合唱团 dp[i][j]:从1到i,中挑选最大乘积是多少&#xff0c;但是我们会发现状态转移方程推不出来&#xff0c;我们不知道如何推导的任意两个人&#xff0c; 从[…

[解决]Invalid configuration `aarch64-openwrt-linux‘: machine `aarch64-openwrt

背景 交叉编译libev-4.19 问题 checking host system type… Invalid configuration aarch64-openwrt-linux: machine aarch64-openwrt’ not recognized 解决 打开config.sub&#xff0c;在244行后添加"| aarch64-openwrt \ "

RK 方案u-boot阶段添加驱动

驱动部分&#xff1a; u-boot/drivers/video/drm/gpio_init.c /** (C) Copyright 2008-2017 Fuzhou Rockchip Electronics Co., Ltd** SPDX-License-Identifier: GPL-2.0*/#include <config.h> #include <common.h> #include <errno.h> #include <malloc…

jmeter连接mysql数据,并将查询结果存储到指定txt文件中

1、首先jmeter先进行连接mysql相关的配置&#xff0c;我之前已经有教程了就不赘述了&#xff0c;教程链接如下 jmeter连接mysql数据库以及常规用法-CSDN博客 2、当jmeter成功配置mysql数据库后&#xff0c;在JDBC Request组件中进行如下配置 Variable Name of Pool declared…

关于springboot对接通义千问大模型的尝试

今天正在路上刷手机&#xff0c;突然看到群里有人发了一个链接&#xff0c;内容是Spring Cloud Alibaba AI 的使用&#xff0c;spring cloud AI的使用&#xff0c;于是就想着玩一玩试试&#xff0c;难度不大&#xff0c;就是有些文档的坑&#xff0c;这里做一个记录&#xff0c…

基于RK3588+MCU智能清洁车应用解决方案

智能清洁车应用解决方案 在智慧城市建设发展的过程中&#xff0c;智慧环卫是打造智慧城市的重要组成部分&#xff0c;智能清洁车作为实现环卫智能化、提升作业效率和服务质量的关键工具&#xff0c;发挥着不可或缺的作用。 智能清洁车集成了激光雷达、双目视觉、多重传感器以及…

九月更新|用这5个简单技巧,新手在国内也能轻松使用ChatGPT,GPT新手使用手册(学术教师)

一、 ChatGPT可以做什么&#xff1f; 简单来说&#xff0c;ChatGPT就像一个超级智能的聊天机器人&#xff0c;它可以做很多事情。你可以把它想象成一个非常聪明的助手&#xff0c;随时随地帮你解答问题、提供建议、写文章、甚至讲笑话。以下是几个具体的例子&#xff1a; 1. …

论文浅尝 | 超越实体对齐: 通过实体关系协同实现完整的知识图谱对齐

笔记整理&#xff1a;米尔扎提阿力木&#xff0c;天津大学硕士&#xff0c;研究方向为大模型 论文链接&#xff1a;https://arxiv.org/abs/2407.17745 摘要 知识图谱对齐(Knowledge Graph Alignment, KGA)旨在整合来自多个来源的知识&#xff0c;以解决单个知识图谱在覆盖范围和…

一文带你了解可观测领域中APM与eBPF的技术差异

近年来&#xff0c;随着eBPF技术的兴起&#xff0c;很多人有这样的疑惑&#xff1a;eBPF和APM有什么区别&#xff1f;他们是竞争关系还是合作关系&#xff1f;本文将就此展开讨论&#xff0c;并给出切实有效的落地方案。 01APM APM全称&#xff1a;Application Performance Ma…

vulhub xxe靶机

步骤一&#xff0c;访问浏览器 步骤二&#xff0c;输入/robots.txt 步骤三&#xff0c;发现存在用户登录的一个界面/xxe 我们登录进去 步骤四&#xff0c;随便输入一个数字或者字母打开BP 抓到包之后发送的重放器里边 通过抓包发现是XML数据提交 步骤五&#xff0c;通过php…

【采集软件】抖音根据关键词批量采集搜索结果工具

这是我用Python开发的抖音关键词搜索采集工具软件。 软件界面截图&#xff1a; 爬取结果截图&#xff1a; 软件演示视频&#xff1a; https://www.bilibili.com/video/BV1Fc41147Be 完整讲解文章&#xff1a; https://www.bilibili.com/read/cv33750458

高翔【自动驾驶与机器人中的SLAM技术】学习笔记(九)imu运动学;lambda表达式;bind;function;std::move()

一、IMU运动学 1、测量值&#xff1a; 常用六轴IMU是由陀螺仪&#xff08;Gyroscope&#xff09;和加速度计&#xff08;Acclerator&#xff09;两部分组成。 陀螺仪测量&#xff1a;角速度。加速度计&#xff1a;加速度。 安装要尽量保证IMU的安装位置在车辆中心。避免由I…

基于SOA-BP海鸥优化BP神经网络实现数据预测Python实现

BP神经网络是一种多层前馈神经网络&#xff0c;它通过反向传播算法来训练网络中的权重和偏置&#xff0c;以最小化预测误差。然而&#xff0c;BP神经网络的性能很大程度上依赖于其初始参数的选择&#xff0c;这可能导致训练过程陷入局部最优解。海鸥优化算法因其探索和开发能力…

基于vue框架的残疾人就业帮扶平台97c5w(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,企业,招聘信息,类型,求职信息,投递信息,邀请信息,通知信息,帮扶政策,申请信息,意见反馈 开题报告内容 基于Vue框架的残疾人就业帮扶平台开题报告 一、选题背景与意义 随着社会的文明进步和经济的快速发展&#xff0c;残疾人群体…