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

van-cascader 异步加载

vant官网

异步加载选项

在使用级联选择时当一次性拿到数据量太大时不仅接口慢而且前端渲染页面也会变慢,用户体验很不好,建议使用异步加载选项,
拿到的接口让后端返回一个是否还有下一级的判断,不然van-cascader判断没有children的时候会自动结束的

可以监听 change 事件并动态设置 options,实现异步加载选项。

示例:

<van-popup v-model:show="showCascader" round position="bottom"><van-cascaderv-if="showCascader"  // 加上这个是因为在企微侧边栏使用的时候,操作偶尔会出现tabs歪的情况v-model="formData.id"title="请选择xxx":options="options"active-color="#1989fa":field-names="fieldNames"@change="onChange"@close="showCascader = false"@finish="onFinish"/>
</van-popup>

自定义字段名

后端定义的字段一开始可能不符合vant的默认字段,通过 field-names 属性可以自定义 options 里的字段名称。

const fieldNames = {// 换成后端返回的你需要的对应字段text: 'name',value: 'id',children: 'children'};

监听change事件,动态设置options

const onChange = ({value,selectedOptions}) => {getList({code:value}).then(res => { //请求接口res.data.map(item=>{if(item.children.length==0){ // 这个是和后端约定了如果没有子级,返回一个空数组,可以自己和后端约定一个可判断的值delete item.children}})addTree(selectedOptions, res.data, value)});};const addTree = (selectedOptions, children, id) =>{selectedOptions.forEach(item => {if (item.id=== id) {  // 注意这里是你要的valueitem.children = children}})}

这样就可以动态的获取到每一级下面的数据了

相关文章:

van-cascader 异步加载

vant官网 异步加载选项 在使用级联选择时当一次性拿到数据量太大时不仅接口慢而且前端渲染页面也会变慢&#xff0c;用户体验很不好&#xff0c;建议使用异步加载选项&#xff0c; 拿到的接口让后端返回一个是否还有下一级的判断&#xff0c;不然van-cascader判断没有childre…...

Golang单元测试举例

1.第一个例子 cal.go package mainfunc addUpper(n int) int {res : 0for i : 1; i < n; i {res i}return res }func getSub(n1 int, n2 int) int {return n1 - n2 }cal_test.go package main//测试文件名必须是_test.go结尾 //测试函数必须Test开头 import ("fmt…...

汽车以太网协议栈

《大师说》栏目上线啦# 《大师说》栏目是怿星科技2023年推出的深度思考栏目&#xff0c;通过邀请内部专家&#xff0c;针对智能汽车行业发展、技术趋势等输出个性化的观点。每期一位大师&#xff0c;每位一个话题&#xff0c;本期由我们怿星的CTO虞胜伟&#xff0c;进行分享。…...

数学建模--二次规划型的求解的Python实现

目录 1.算法流程简介 2.算法核心代码 3.算法效果展示 1.算法流程简介 #二次规划模型 #二次规划我们需要用到函数:Cvxopt.solvers.qp(P,q,G,h,A,b) #首先解决二次规划问题和解决线性规划问题的流程差不多 """ 求解思路如下: 1.针对给定的代求式,转化成标准式…...

Ansible-palybook学习

目录 一.playbook介绍二.playbook格式1.书写格式2.notify介绍 一.playbook介绍 playbook 是 ansible 用于配置&#xff0c;部署&#xff0c;和管理被控节点的剧本。通过 playbook 的详细描述&#xff0c;执行其中的一系列 tasks &#xff0c;可以让远端主机达到预期的状态。pl…...

服务注册与服务发现

服务注册与服务发现 Eureka的架构 Eureka客户端&#xff1a;使用了EnableEurekaClient注解的应用服务&#xff0c;如订单服务等&#xff0c;甚至Eureka本身也是一个客户端 Eureka服务端&#xff1a;使用了EnableEurekaServer注解的应用服务&#xff0c;该服务提供了注册表以及…...

RabbitMQ从入门到精通之安装、通讯方式详解

文章目录 RabbitMQ一、RabbitMQ介绍1.1 现存问题 一、RabbitMQ介绍二、RabbitMQ安装三、RabbitMQ架构四、RabbitMQ通信方式4.1 RabbitMQ提供的通讯方式4.2 Helloworld 方式4.2Work queues4.3 Publish/Subscribe4.4 Routing4.5 Topics4.6 RPC (了解) 五、Springboot 操作RabbitM…...

植物大战僵尸植物表(二)

前言 此文章为“植物大战僵尸”专栏中的第007刊&#xff08;2023年9月第六刊&#xff09;。 提示&#xff1a; 1.用于无名版&#xff1b; 2.用于1代&#xff1b; 3.pvz指植物大战僵尸&#xff08;Plants VS Zonbies)。 植物大战僵尸植物表 土豆雷窝瓜火炬树桩火爆辣椒杨…...

UML基础

统一建模语言&#xff08;UML是 Unified Modeling Language的缩写, 是用来对软件系统进行可视化建模的一种语言。UML为面向对象开发系统的产品 进行说明、可视化、和编制文档的一种标准语言。 共有9种图 UML中的图其实不止九种 (相同的图还可能会有不同的名称), 这里的九种图是…...

C# void 关键字学习

C#中void关键字是System.Void的别名&#xff1b; 可以将 void 用作方法&#xff08;或本地函数&#xff09;的返回类型来指定该方法不返回值&#xff1b; 如果C&#xff03;方法中没有参数&#xff0c;则不能将void用作参数&#xff1b;这是与C语言不同的&#xff0c;C语言有…...

OA与CRM与ORACLE

办公自动化&#xff08;Office Automation&#xff0c;简称OA&#xff09;&#xff0c;是将计算机、通信等现代化技术运用到传统办公方式&#xff0c;进而形成的一种新型办公方式。办公自动化利用现代化设备和信息化技术&#xff0c;代替办公人员传统的部分手动或重复性业务活动…...

【C++杂货铺】探索list的底层实现

文章目录 一、list的介绍及使用1.1 list的介绍1.2 list的使用1.2.1 list的构造1.2.2 list iterator的使用1.2.3 list capacity&#xff08;容量相关&#xff09;1.2.4 list element access&#xff08;元素访问&#xff09;1.2.5 list modifiers&#xff08;链表修改&#xff0…...

NX/UG二次开发—Parasolid—PK_BODY_pick_topols

最近在写一个判断圆孔深度和通盲状态的功能&#xff0c;发现PK_BODY_pick_topols射线函数可以设置到射线垂直距离&#xff0c;相当于一个圆柱空间&#xff0c;但在测试发现&#xff0c;R7的孔&#xff0c;设置&#xff1a; max_edge_dist 0.007; max_vertices 0.007; 结果测…...

【校招VIP】前端算法考点之大数据相关

考点介绍&#xff1a; 大数据的关键技术分为分析技术和处理技术&#xff0c;可用于大数据分析的关键技术主要包括A/B测试&#xff0c;关联规则挖掘&#xff0c;数据挖掘&#xff0c;集成学习&#xff0c;遗传算法&#xff0c;机器学习&#xff0c;自然语言处理&#xff0c;模式…...

Goland2023版新UI的debug模式调试框按钮功能说明

一、背景 Jetbrains家的IDE的UI基本都是一样的&#xff0c;debug模式的调试框按钮排列也是一致的&#xff0c;但是在我使用Goland2023版的新UI时&#xff0c;发现调试框的按钮变化还是很大的&#xff0c;有一些按钮被收起来了&#xff0c;如果看之前的博客会发现有一些文中的旧…...

【AIGC专题】Stable Diffusion 从入门到企业级应用0414

一、前言 本文是《Stable Diffusion 从入门到企业级应用实战》系列的第四部分能力进阶篇《Stable Diffusion ControlNet v1.1 图像精准控制》的第0414篇 利用Stable Diffusion ControlNet 法线贴图模型精准控制图像生成。本部分内容&#xff0c;位于整个Stable Diffusion生态体…...

汇编原理学习记录:物理地址=段地址*16+偏移地址

文章目录 知识点个人思考解释存储器大小为1MB段的最大占用存储为64KB物理地址段地址*16偏移地址 知识点 8086计算机拥有20根地址总线和16根数据总线&#xff0c;地址总线中的16根和数据总线存在复用 数据总线的数量决定了数据总线的宽度&#xff0c;决定了处理器的位数&#…...

mysql-2:安装mysql

MySQL安装 操作系统&#xff1a;CentOS 7MySQL&#xff1a;5.6 MySQL的卸载 查看MySQL软件 rpm -qa | grep mysqlyum repolist all | grep mysql 卸载MySQL 卸载mysql yum remove -y mysql mysql-libs mysql-common删除mysql下的数据文件 rm -rf /var/lib/mysql删除mys…...

gin框架

【狂神说】Gin框架一小时上手 | 快速转型GoWeb开发 | Go语言零基础教程_哔哩哔哩_bilibili 1.介绍 2.简单程序 1&#xff09;gin.GET/POST/PUT/DELETE函数 Go Gin 简明教程 | 快速入门 | 极客兔兔 (geektutu.com) 我的理解是&#xff1a;这类函数就像是在监听接口一样&…...

Laravel 完整开源项目大全

原型项目 Laravel 5 Boilerplate —— 基于当前Laravel最新版本&#xff08;Laravel 6.0&#xff09;并集成Boilerplate的项目Laravel 5 Angular Material Starter —— 这是一个 Laravel 和 AngularJS 的原型项目&#xff08;最高支持版本&#xff1a;5.3&#xff0c;长期未更…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...