el-select下拉选择缓存的实现

2025-01-10 16:50

本文主要是介绍el-select下拉选择缓存的实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

项目场景:

el-select下拉选择缓存的实现

从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧已选字段模拟缓存:下拉显示时展示已选字段列表,对选项选中或取消操作时下拉框展示选中与取消的字段;下拉隐藏时,下拉框选项与右侧遗留标签同步。

问题描述

1、查阅资料,通过给el-select绑定@change方法可以监听到选中值的变换(只能获取当前已选中的所有值(array方式存储),如果监听变化的是哪个值,需自定义变量缓存上一次存储与当前选中做对比)。
2、@visible-change监听下拉框的显示与隐藏,会在显示和隐藏时都触发。
3、初始设想:删除输入框内标签时,直接将值返回到左侧列表,下拉框选项数量更新;取消下拉框内选择时,输入框内值删除,下拉框内选项数量保持不变,下拉隐藏时将取消选择的值返回左侧列表。
然而实际发现:change方法无论是输入框选项操作还是下拉框选项操作都会触发,无法区分在哪个区域操作。

解决方案:

改变设计思路:

  • 下拉框不显示,添加与删除项同步更新下拉选项
  • 下拉框显示时,下拉框缓存初始展示数据。在下拉框中取消选项同时数据项返回左侧列表,重新选中时左侧列表项删除并移入下拉多选,隐藏时下拉框保持最新选中项存储

关键代码:

<template>
   <el-select :popper-append-to-body="false" class="hide_error" v-model="variables_columns" multiple @visible-change="hjsideOption" @change="turnOption" placeholder="请选择" id="varia-col-select">
        <el-option
         v-for="item in checkedList"
         :key="item.value"
         :label="item.label"
         :value="item.value"
         >
      </el-option>
   </el-select>
</template>

js

export default {
	data(){
		return {
			variables_columns:[],
			optionVisible:false,//下拉框显示状态,false为隐藏,true为显示
			lastOperation:{data:[]},//上次选择
			startOption:false,//判断是否第一次打开下拉框
			tableData:[{id:0,name:"M1_GRAT"},{id:1,name:"M2_GRAT"},...],//模拟左侧列表数据
		}
	},
	methods:{
		hideOption(){//隐藏时更新下拉选项
			this.optionVisible = !this.optionVisible;
			if(!this.optionVisible){
				this.checkList = this.checkList.filter(
					item => thisjavascript.variables_columns.some(v => v==item.value)
				)
			}
		},
		turnOption(val){//缓存选项
			if(!th编程is.startOption)this.lastOperation.data = this.checkList.map(item => item.value);
			this.startOperation = true;
			let item = [];
			if(this.optionVisable){//下拉框显http://www.chinasem.cn示时
				if(this.lastOperation.data.length>val.length){//取消选项操作
					item = this.lastOperatin.data.filter(v => !val.some(v1 => v1 == v));
					let backNode = {id:this.tableData.length,name:item[0]};//返回的元素
					this.tableData.push(backNode);
				}else{//在下拉框中重新选中
					let delNode = val.filter(v1 => !this.lastOperation.data.some(v2 => v1 == v2));
					this.tableData = this.tChina编程ableData.filter(v => v.name != delNode[0])
				}
			} else { //下拉框不显示,只有删除选项时触发
				item = this.checkedList.filter(v => !val.some(v1 => v1 == v.value));
				this.checkList = this.checkList.filter(v => val.some(v1 => v.value));
				let backNode = {id:this.tableData.length,name:item[0].value}
				this.tableData.push(backNode);
			}
			this.lastOperation.data = val;
		}
	},
	...
}

备注:①:popper-append-to-body="false"可将下拉框dom嵌入div中,方便调整多选下拉框样式②multiple是el-select多选必须添加的属性

到此这篇关于el-select下拉选择缓存的实现的文章就介绍到这了,更多相关el-select下拉选择缓存内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程(www.chinasem.cn)!

这篇关于el-select下拉选择缓存的实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1153025

相关文章

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

Qt如何实现文本编辑器光标高亮技术

《Qt如何实现文本编辑器光标高亮技术》这篇文章主要为大家详细介绍了Qt如何实现文本编辑器光标高亮技术,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解下... 目录实现代码函数作用概述代码详解 + 注释使用 QTextEdit 的高亮技术(重点)总结用到的关键技术点应用场景举例示例优化建议

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

Qt 设置软件版本信息的实现

《Qt设置软件版本信息的实现》本文介绍了Qt项目中设置版本信息的三种常用方法,包括.pro文件和version.rc配置、CMakeLists.txt与version.h.in结合,具有一定的参考... 目录在运行程序期间设置版本信息可以参考VS在 QT 中设置软件版本信息的几种方法方法一:通过 .pro

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

SpringBoot中使用Flux实现流式返回的方法小结

《SpringBoot中使用Flux实现流式返回的方法小结》文章介绍流式返回(StreamingResponse)在SpringBoot中通过Flux实现,优势包括提升用户体验、降低内存消耗、支持长连... 目录背景流式返回的核心概念与优势1. 提升用户体验2. 降低内存消耗3. 支持长连接与实时通信在Sp

Conda虚拟环境的复制和迁移的四种方法实现

《Conda虚拟环境的复制和迁移的四种方法实现》本文主要介绍了Conda虚拟环境的复制和迁移的四种方法实现,包括requirements.txt,environment.yml,conda-pack,... 目录在本机复制Conda虚拟环境相同操作系统之间复制环境方法一:requirements.txt方法

Spring Boot 实现 IP 限流的原理、实践与利弊解析

《SpringBoot实现IP限流的原理、实践与利弊解析》在SpringBoot中实现IP限流是一种简单而有效的方式来保障系统的稳定性和可用性,本文给大家介绍SpringBoot实现IP限... 目录一、引言二、IP 限流原理2.1 令牌桶算法2.2 漏桶算法三、使用场景3.1 防止恶意攻击3.2 控制资源

springboot下载接口限速功能实现

《springboot下载接口限速功能实现》通过Redis统计并发数动态调整每个用户带宽,核心逻辑为每秒读取并发送限定数据量,防止单用户占用过多资源,确保整体下载均衡且高效,本文给大家介绍spring... 目录 一、整体目标 二、涉及的主要类/方法✅ 三、核心流程图解(简化) 四、关键代码详解1️⃣ 设置