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

vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?

需要实现的懒加载回显效果

比如:后端返回数据 广东省/广州市/天河区440000000000/440100000000/440106000000,需要我们自动展开到天河区的下一级,效果如下

在这里插入图片描述

代码实现

我的实现思路就是拿到 440000000000/440100000000/440106000000 每一层级的数据,然后组成一个树。

这里接口 getAreaList 返回的数据格式如下:

[{areaCode: "440106000000",areaLevel: "4",areaName: "天河区",areaSeq: "5",childNum: 21,parentAreaSeq: "xxx"}
]

组件试下如下:

<template><div class="cascader-lazy"><h2>需要回显的地区:广东省/广州市/天河区</h2><h3>需要回显的地区对应的编码:440000000000/440100000000/440106000000</h3><el-cascader ref="cascaderLazy" :options="dataList" :props="props" v-model="areaList" /></div>
</template><script>
import axios from "axios";export default {name: "CascaderLazy",data() {return {areaList: [],dataList: [],props: {value: "areaCode",label: "areaName",lazy: true,lazyLoad: this.lazyLoad}};},mounted() {this.areaList = ["440000000000", "440100000000", "440106000000"];this.loadOptions(this.areaList);},methods: {// 获取数据getAreaList(parentAreaSeq) {return new Promise(async (resolve, reject) => {try {const response = await axios.get("xxxx", {params: {parentAreaSeq: parentAreaSeq}});resolve(response.data.data.map((el) => {el.leaf = el.childNum === 0;return el;}));} catch (error) {console.error(error);reject();}});},// 遍历一级选择框,把二级选择框的数据放在一级的children属性上async loadOptions(areaList) {// 先初始调用一次let tempArr = [];let initRes = await this.getAreaList();tempArr.push(initRes);// 然后遍历 areaList 找到对应的 areaSeq 获取地区列表for (let i = 0; i < areaList.length; i++) {if (areaList.length > 0) {let areaSeq = "";areaSeq = tempArr[i].filter((el) => el.areaCode === areaList[i]).map((el) => el.areaSeq)[0];let res = await this.getAreaList(areaSeq);tempArr.push(res);}}// 先加一个最后层级的地区用于展示,最后在删掉if (tempArr[areaList.length][0]) {areaList.push(tempArr[areaList.length][0].areaCode);}// 从后面开始遍历组成一个树for (let len = tempArr.length - 1; len >= 0; len--) {if (len - 1 < 0) break;// 给当前areaCode添加childrentempArr[len - 1].forEach((item) => {if (item.areaCode === areaList[len - 1]) {item.children = tempArr[len];}});}this.dataList = tempArr[0];// 删掉最后选中的this.$nextTick(() => {areaList.pop();// 点击自动下拉出来this.$refs.cascaderLazy.$el.click();});},async lazyLoad(node, resolve) {let nodes = [];if (node.level !== 0 && node.data) {nodes = await this.getAreaList(node.data.areaSeq);}resolve(nodes);}}
};
</script>

相关文章:

vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?

需要实现的懒加载回显效果 比如&#xff1a;后端返回数据 广东省/广州市/天河区 &#xff1a;440000000000/440100000000/440106000000&#xff0c;需要我们自动展开到天河区的下一级&#xff0c;效果如下 代码实现 我的实现思路就是拿到 440000000000/440100000000/44010600…...

Qt raise()问题

项目场景&#xff1a; 需要将一个弹窗提升至最前面&#xff0c;那么弹出时直接使用raise()即可。 问题描述&#xff1a; 使用QDialog::raise()时&#xff0c;偶发界面阻塞卡死现象。 原因分析&#xff1a; QDialog::raise()函数是置于顶部的作用&#xff0c;但是如果使用不当…...

26591-2011 粮油机械 糙米精选机

声明 本文是学习GB-T 26591-2011 粮油机械 糙米精选机. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了糙米精选机的有关术语和定义、工作原理、型号及基本参数、技术要求、试验方法、检 验规则、标志、包装、运输和储存要求。 …...

JavaScript位运算的妙用

位运算的妙用: 奇偶数, 色值换算,换值, 编码等 位运算的基础知识: 操作数是32位整数自动转化为整数在二进制下进行运算 一.按位与& 判断奇偶数: 奇数: num & 1 1偶数: num & 1 0 基本知识: 用法&#xff1a;操作数1 & 操作数2规则&#xff1a;有 0 则为…...

This dependency was not found: vxe-table/lib/vxe-table in ./src/main.js

描述 使用时 安装 npm install xe-utils vxe-table 引入 import Vue from vue import xe-utils import VXETable from vxe-table import vxe-table/lib/style.css vxe-table是一个基于 vue 的 PC 端表格组件&#xff0c; 支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验…...

网工内推 | H3C售前工程师,上市公司,13薪,有带薪年假、年终奖

01 长虹佳华 招聘岗位&#xff1a;高级售前工程师&#xff08;H3C&#xff09; 职责描述&#xff1a; 1. 负责公司签约代理的网络安全产品在区域的项目售前技术支持工作&#xff0c;包括项目售前交流、方案编写、招投标、产品测试等相关支持工作&#xff1b; 2. 与厂商产品部门…...

深入理解常见应用级算法思想

1 概论 1.1 概念 1.1.1 数据结构 1&#xff09;概述 数据结构是计算机存储、组织数据的方式。数据结构是指相互之间存在一种或多种特定关系的数据元素的集合。通常情况下&#xff0c;精心选择的数据结构可以带来更高的运行或者存储效率。 2&#xff09;划分 从关注的维度…...

Windows下使用pybind11教程(python调用C++代码)

1. 下载pybind11 gittub中下载&#xff0c;pybind下载后解压 2. C生成库文件 2.1.VS新建空白工程&#xff0c;工程名随意起 - 2.2更改目标文件名和配置类型 - 2.3更改目标文件拓展名 2.4添加include路径和库路径 包含目录中添加刚刚下载好的pybind的include路径以及pyhon的…...

基于通用LLM的一次测试用例自动生成的实验

基于通用LLM的一次测试用例自动生成的实验 选择很多,最后选择了讯飞的星火做本次实验,原因还是因为讯飞的LLM的API是有免费额度的,案例代码相对比较成熟易学易用 1 LLM和基于LLM的应用 最近这段实际LLM已经变成了一个炙手可热的词汇,现在任何技术不了到LLM都感觉好像没有彻…...

【excel密码】为什么工作表不能移动、复制了?

为什么excel文件打开之后&#xff0c;工作表里是可以编辑的&#xff0c;但是想要移动工作表或者复制、重命名等操作&#xff0c;这是什么原因&#xff1f;其实这是因为设置了工作簿保护&#xff0c;设置了保护的工作簿无法对整张工作表进行操作。 想要取消这种保护&#xff0c;…...

软考高级之系统架构师之计算机基础

概述 今天是9月28日&#xff0c;距离软考高级只剩37天&#xff0c;加油&#xff01; 概念 三种周期&#xff1a; Clock Cycle&#xff1a;时钟周期&#xff0c;CPU主频&#xff0c;又称为时钟频率&#xff0c;时钟周期是时钟频率的倒数Instruction Cycle&#xff1a;指令周…...

Mysql生产随笔

目录 1. Mysql批量Kill删除processlist 1.1查看进程、拼接、导出、执行 1.2常见错误解决方案 2.关于时区 3.内存占用优化 记录一下生产过程中的一些场景和命令使用方法&#xff0c;不定期进行更新 1. Mysql批量Kill删除processlist 1.1查看进程、拼接、导出、执行 sho…...

现代卷积网络实战系列2:PyTorch构建训练函数、LeNet网络

&#x1f308;&#x1f308;&#x1f308;现代卷积网络实战系列 总目录 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 1、MNIST数据集处理、加载、网络初始化、测试函数 2、训练函数、PyTorch构建LeNet网络 3、PyTorch从零构建AlexNet训练MNIST数据…...

leetCode 62.不同路径 动态规划 + 空间复杂度优化

62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xf…...

在 .NET 8 Release Candidate 1 中推出 .NET MAUI:质量

作者&#xff1a;David Ortinau 排版&#xff1a;Alan Wang 今天&#xff0c;我们很高兴地宣布 .NET MAUI 在 .NET 8 Release Candidate 1 中已经可用&#xff0c;该版本带有适用于生产应用程序的正式许可证&#xff0c;因此您可以放心地将此版本用于生产环境。我们在 .NET 8 中…...

Spring 学习(八)事务管理

1. 事务 1.1 事务的 ACID 原则 数据库事务&#xff08;transaction&#xff09;是访问并可能操作各种数据项的一个数据库操作序列。事务必须满足 ACID 原则——即原子性&#xff08;Atomicity&#xff09;、一致性&#xff08;Consistency&#xff09;、隔离性&#xff08;Iso…...

CodeTON Round 6 (Div 1 + Div 2, Rated, Prizes!)(A - E)

CodeTON Round 6 (Div. 1 Div. 2, Rated, Prizes!)(A - E) CodeTON Round 6 (Div. 1 Div. 2, Rated, Prizes!) A. MEXanized Array&#xff08;分类讨论&#xff09; 可以发现当 n < k 或者 k > x 1 的时候无法构成 &#xff0c; 其余的时候贪心的用 x 最大化贡献即…...

Spring 源码分析(五)——Spring三级缓存的作用分别是什么?

Spring 的三级缓存是经典面试题&#xff0c;也会看到一些文章讲三级缓存与循环依赖之的关系。那么&#xff0c;三级缓存分别存储的什么呢&#xff1f;他们的作用又分别是什么&#xff1f; 一、一、二级缓存 一级缓存是一个名为 singletonObjects 的 ConcurrentHashMap&#x…...

Django基于类视图实现增删改查

第一步&#xff1a;导入View from django.views import View 第二步&#xff1a;新建这个基类 class CLS_executer(View):db DB_executerdef get(self, request):executer_list list(self.db.objects.all().values())return HttpResponse(json.dumps(executer_list), conte…...

matplotlib绘图实现中文宋体的两种方法(亲测)

方法一&#xff1a;这种方法我没有测试。 第一步 找宋体字体 &#xff08;win11系统&#xff09; 2.matplotlib字体目录&#xff0c;如果不知道的话&#xff0c;可以通过以下代码查询&#xff1a; matplotlib.matplotlib_fname() 如果你是Anaconda3 安装的matplotlib&#x…...

非常有用的JavaScript高阶面试技巧!

&#x1f340;一、闭包 闭包是指函数中定义的函数&#xff0c;它可以访问外部函数的变量。闭包可以用来创建私有变量和方法&#xff0c;从而保护代码不受外界干扰。 // 例1 function outerFunction() {const privateVariable "私有变量";function innerFunction()…...

windows 安装Linux子系统 Ubuntu 并配置python3

环境说明&#xff1a; Windows 11 Ubuntu 20.04.6 安装步骤以及问题&#xff1a; 1、开启Windows Subsystem for Linux dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart 2、开启虚拟机特性 dism.exe /online /enabl…...

pytorch的pixel_shuffle转tflite文件

torch.pixel_shuffle()是pytorch里面上采样比较常用的方法&#xff0c;但是和tensoflow的depth_to_space不是完全一样的&#xff0c;虽然看起来功能很像&#xff0c;但是细微是有差异的 def tf_pixelshuffle(input, upscale_factor):temp []depth upscale_factor *upscale_f…...

sentinel-dashboard-1.8.0.jar开机自启动脚本

启动阿里巴巴的流控组件控制面板需要运行一个jar包&#xff0c;通常需要运行如下命令&#xff1a; java -server -Xms4G -Xmx4G -Dserver.port8080 -Dcsp.sentinel.dashboard.server127.0.0.1:8080 -Dproject.namesentinel-dashboard -jar sentinel-dashboard-1.8.0.jar &…...

c++堆排序-建堆-插入-删除-排序

本文以大根堆为例&#xff0c;用数组实现&#xff0c;它的nums[0]是数组最大值。 时间复杂度分析&#xff1a; 建堆o(n) 插入删除o(logn) 堆排序O(nlogn) 首先上代码 #include<bits/stdc.h>using namespace std; void down(vector<int>&nums, int idx, i…...

使用代理后pip install 出现ssl错误

window直接设置代理 httphttp://127.0.0.1:7890;httpshttp://127.0.0.1...

护眼灯什么价位的好?最具性价比的护眼台灯推荐

到了晚上光线比较弱&#xff0c;这时候就需要开灯&#xff0c;要是孩子需要近距离看字学习等等&#xff0c;给孩子选择的灯具要特别的重视。护眼灯就是目前颇受学生家长青睐的灯具之一&#xff0c;越来越多的人会购买一个护眼灯给自己的孩子让孩子能够在灯光下学习的时候&#…...

vue event bus 事件总线

vue event bus 事件总线 创建 工程&#xff1a; H:\java_work\java_springboot\vue_study ctrl按住不放 右键 悬着 powershell H:\java_work\java_springboot\js_study\Vue2_3入门到实战-配套资料\01-随堂代码素材\day04\准备代码\08-事件总线-扩展 vue --version vue crea…...

深信服云桌面用户忘记密码后的处理

深信服云桌面用户忘记了密码&#xff0c;分两种情况&#xff0c;一个是忘记了登录深信服云桌面的密码&#xff0c;另外一个是忘记了进入操作系统的密码。 一、忘记了登录深信服云桌面的密码 登录虚拟桌面接入管理系统界面&#xff0c;在用户管理中选择用户后&#xff0c;点击后…...

Cocos Creator3.8 实战问题(一)cocos creator prefab 无法显示内容

问题描述&#xff1a; cocos creator prefab 无法显示内容&#xff0c; 或者只显示一部分内容。 creator编辑器中能看见&#xff1a; 预览时&#xff0c;看不见内容&#xff1a; **问题原因&#xff1a;** prefab node 所在的layer&#xff0c;默认是default。 解决方法&…...

wordpress 内页插件/搭建网站

原文出处&#xff1a; 微软互联网开发支持 Visual Studio 是一个强大的调试工具&#xff0c;里面很多隐藏功能少有人问津&#xff0c;但是在特定场景可以节省你很多时间&#xff0c;本文主要介绍一些Visual Studio调试相关的隐藏功能&#xff0c;欢迎大家补充。 运行到光标(R…...

自应式网站/游戏推广员是违法的吗

//将输入的小写转换为大写 private void txtstockout_id_KeyPress(object sender, KeyPressEventArgs e){//将输入的小写转换为大写if ((int)e.KeyChar > 97 && (int)e.KeyChar < 122){e.KeyChar (char)((int)e.KeyChar - 32);}} ① e.Handled如果处理过事件&am…...

外部网站可以做链接到淘宝吗/磁力狗bt

想要寻找一款各功能强大&#xff0c;使用简便的看图工具&#xff1f;一定不要错过这篇文章&#xff0c;小编精选了5款综合性非常高的软件分给大家&#xff0c;颜值和功能性都经得住吊打的那种&#xff0c;话不多说来看文字介绍吧~ macOS上简便好用的看图软件分享 XnViewMP fo…...

中山建设网站官网/百度指数趋势

题目链接 Leetcode.939 最小面积矩形 Rating &#xff1a; 1752 题目描述 给定在 xy平面上的一组点&#xff0c;确定由这些点组成的矩形的最小面积&#xff0c;其中矩形的边平行于 x 轴和 y 轴。 如果没有任何矩形&#xff0c;就返回 0。 示例 1&#xff1a; 输入&#xff1…...

代做网站在哪找活/北京百度竞价托管公司

2020年疫情爆发之初&#xff0c;雷神山和火神山在10天内迅速建立&#xff0c;在这惊人的速度背后&#xff0c;BIM技术功不可没&#xff0c;今天我们就一起来了解下BIM工程师。BIM是什么&#xff1f;BIM的中文名称为&#xff1a;建筑信息模型&#xff08;Building Information M…...

求推荐做ppt的网站/新冠疫苗接种最新消息

Spring学习笔记之初入Ioc Ioc容器 BeanFactory:Ioc容器定义最基础的接口&#xff0c;定义了作为Ioc容器所必备最基本的方法。ApplicationContext:细化了许多BeanFactory的方法&#xff0c;并且通过继承许多其他接口&#xff0c;实现了更多其他的IoC容器特性 使用IoC容器 编…...