el-select使用filterable下拉无法关闭得问题

news2025/1/1 21:30:09

这里推荐一个前端框架 sakuya / SCUI，他里面有个formTable，可以解决很多订单明细保存得问题。基本沿用element-plus的前端使用模式，让表单表格变的非常容易。
1
这个的供应商插件，当使用filterable后，点击表格重的选项，下拉的表格不会关闭。去掉filterable就可以了

<sc-table-select :table-width="450" :apiObj="apiObj" @change="change" :props="props" :params="params"
     clearable filterable>
        <el-table-column prop="code" label="编码"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="contacts" label="联系人"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="creditCode" label="统一社会信用代码"></el-table-column>
    </sc-table-select>

网上有不少同类型的问题element ui el-select点击图标无法关闭下拉框问题
el-select 中加了filterable 点击箭头下拉框回收不去问题
那么如何解决当前的问题呢？选中数据后，这个被执行了两次
1
是不是visible-change没搞懂是怎么回事，于是按照这个思路去调查，el-select内嵌套el-select—筛选下拉列表遇到的若干问题及解决
el-select二次封装，解决数据量太大导致卡顿问题，实现远程搜索，滚动加载数据，搜索数据回显
visible-change对应的参数官方只有一个，这个跟网上有些资料不一致，可能是版本不同。
1
因此推断，当select展开的时候就会触发visible-change这个事件，那么什么时候可以触发展开呢？不会不会只要有值输入进去，就会触发呢？
element-UI之el-select的坑，这个有类似的问题，但是却没有解决方案。
在别人的基础上增加了hasClick，点击了做一个标记，然后再清理的时候恢复。

<template>
	<el-select ref="select" v-model="defaultValue" :value-key="defaultProps.value" @focus="handleFocus"
		:size="size" :clearable="clearable" :multiple="multiple" :collapse-tags="collapseTags" :collapse-tags-tooltip="collapseTagsTooltip" :filterable="filterable" :placeholder="placeholder" :disabled="disabled" :filter-method="filterMethod" @remove-tag="removeTag" 
		@visible-change="visibleChange" 
		@clear="clear">
		<template #empty>
			<div class="sc-table-select__table" :style="{width: tableWidth+'px'}" v-loading="loading">
				<div class="sc-table-select__header">
					<slot name="header" :form="formData" :submit="formSubmit"></slot>
				</div>
				<el-table ref="table" :data="tableData" :height="245" :highlight-current-row="!multiple" @row-dblclick="click" @select="select" @select-all="selectAll" stripe border>
					<el-table-column v-if="multiple" type="selection" width="45"></el-table-column>
					<el-table-column v-else type="index" width="45">
						<template #default="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span></template>
					</el-table-column>
					<slot></slot>
				</el-table>
				<div class="sc-table-select__page">
					<el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
				</div>
			</div>
		</template>
	</el-select>
</template>

<script>
	import config from "@/config/tableSelect";

	export default {
		props: {
			modelValue: null,
			apiObj: { type: Object, default: () => {} },
			params: { type: Object, default: () => {} },
			placeholder: { type: String, default: "请选择" },
			size: { type: String, default: "default" },
			clearable: { type: Boolean, default: false },
			multiple: { type: Boolean, default: false },
			filterable: { type: Boolean, default: false },
			collapseTags: { type: Boolean, default: false },
			collapseTagsTooltip: { type: Boolean, default: false },
			disabled: { type: Boolean, default: false },
			tableWidth: {type: Number, default: 400},
			mode: { type: String, default: "popover" },
			props: { type: Object, default: () => {} }
		},
		data() {
			return {
				loading: false,
				keyword: null,
				defaultValue: [],
				tableData: [],
				pageSize: config.pageSize,
				total: 0,
				currentPage: 1,
				defaultProps: {
					label: config.props.label,
					value: config.props.value,
					page: config.request.page,
					pageSize: config.request.pageSize,
					keyword: config.request.keyword
				},
				formData: {},
				select:'',
				hasClick:false,
			}
		},
		computed: {

		},
		watch: {
			modelValue:{
				handler(){
					this.defaultValue = this.modelValue
					this.autoCurrentLabel()
				},
				deep: true
			}
		},
		
		mounted() {
			this.defaultProps = Object.assign(this.defaultProps, this.props);
			this.defaultValue =  this.modelValue
			this.autoCurrentLabel()
		},
		methods: {
			handleFocus(){
				console.log('处理 focus 事件');
			},
			//表格显示隐藏回调
			visibleChange(visible){
				if(visible){
					if (this.hasClick){
						this.blur()
						return ;
					}
					this.currentPage = 1
					this.keyword = null
					this.formData = {}
					this.getData()
				}else{
					this.autoCurrentLabel()
				}
			},
			//获取表格数据
			async getData(){
				this.loading = true;
				var reqData = {
					[this.defaultProps.page]: this.currentPage,
					[this.defaultProps.pageSize]: this.pageSize,
					[this.defaultProps.keyword]: this.keyword,
					// 'asId':userInfo.value.currentAsId
				}
				Object.assign(reqData, this.params, this.formData)
				var res = await this.apiObj(reqData);
				var parseData = config.parseData(res)
				this.tableData = parseData.rows;
				this.total = parseData.total;
				this.loading = false;
				//表格默认赋值
				this.$nextTick(() => {
					if(this.multiple){
						this.defaultValue.forEach(row => {
							var setrow = this.tableData.filter(item => item[this.defaultProps.value]===row[this.defaultProps.value] )
							if(setrow.length > 0){
								this.$refs.table.toggleRowSelection(setrow[0], true);
							}
						})
					}else{
						var setrow = this.tableData.filter(item => item[this.defaultProps.value]===this.defaultValue[this.defaultProps.value] )
						this.$refs.table.setCurrentRow(setrow[0]);
					}
					this.$refs.table.setScrollTop(0)
				})
			},
			//插糟表单提交
			formSubmit(){
				this.currentPage = 1
				this.keyword = null
				this.getData()
			},
			//分页刷新表格
			reload(){
				this.getData()
			},
			//自动模拟options赋值
			autoCurrentLabel(){
				this.$nextTick(() => {
					if(this.multiple){
						this.$refs.select.selected.forEach(item => {
							item.currentLabel = item.value[this.defaultProps.label]
						})
					}else{
						this.$refs.select.selectedLabel = this.defaultValue[this.defaultProps.label]
					}
				})
			},
			//表格勾选事件
			select(rows, row){
				var isSelect = rows.length && rows.indexOf(row) !== -1
				if(isSelect){
					this.defaultValue.push(row)
				}else{
					this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1)
				}
				this.autoCurrentLabel()
				this.$emit('update:modelValue', this.defaultValue);
				this.$emit('change', this.defaultValue);
			},
			//表格全选事件
			selectAll(rows){
				var isAllSelect = rows.length > 0
				if(isAllSelect){
					rows.forEach(row => {
						var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
						if(!isHas){
							this.defaultValue.push(row)
						}
					})
				}else{
					this.tableData.forEach(row => {
						var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
						if(isHas){
							this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1)
						}
					})
				}
				this.autoCurrentLabel()
				this.$emit('update:modelValue', this.defaultValue);
				this.$emit('change', this.defaultValue);
			},
			click(row){
				if(this.multiple){
					//处理多选点击行
				}else{
					this.hasClick = true;
					this.defaultValue = row
					this.blur()
					this.autoCurrentLabel()
					this.$emit('update:modelValue', this.defaultValue);
					this.$emit('change', this.defaultValue);
				}
			},
			//tags删除后回调
			removeTag(tag){
				var row = this.findRowByKey(tag[this.defaultProps.value])
				this.$refs.table.toggleRowSelection(row, false);
				this.$emit('update:modelValue', this.defaultValue);
			},
			//清空后的回调
			clear(){
				this.$emit('update:modelValue', this.defaultValue);
				this.hasClick = false;
			},
			// 关键值查询表格数据行
			findRowByKey (value) {
				return this.tableData.find(item => item[this.defaultProps.value] === value)
			},
			filterMethod(keyword){
				console.log('click',this.hasClick)
				if (this.hasClick){
					return false;
				}
				if(!keyword){
					this.keyword = null;
					return false;
				}
				this.keyword = keyword;
				this.getData()
			},
			// 触发select隐藏
			blur(){
				this.$refs.select.blur();
			},
			// 触发select显示
			focus(){
				this.$refs.select.focus();
			}
		}
	}
</script>

<style scoped>
	.sc-table-select__table {padding:12px;}
	.sc-table-select__page {padding-top: 12px;}
</style>

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

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

相关文章

C++初阶：string的使用与STL

C++初阶：string的使用与STL

目录 1. C标准库与STL2. string是什么3. string的使用3.1 构造与拷贝构造3.2 遍历访问方式3.3 STL中算法操作相关内容3.4 容量相关成员函数3.5 内容修改相关成员函数3.6 string类操作成员函数3.7 string的非成员函数 1. C标准库与STL 编程语言标准库中&#xff0c;有着许多基础…
阅读更多...
KubeSphere集群安装-nfs分布式文件共享-对接Harbor-对接阿里云镜像仓库-遇到踩坑记录

KubeSphere集群安装-nfs分布式文件共享-对接Harbor-对接阿里云镜像仓库-遇到踩坑记录

KubeSphere安装和使用集群版 官网：https://www.kubesphere.io/zh/ 使用 KubeKey 内置 HAproxy 创建高可用集群：https://www.kubesphere.io/zh/docs/v3.3/installing-on-linux/high-availability-configurations/internal-ha-configuration/ 特别注意 安装前注意必须把当前使…
阅读更多...
【GPT-SOVITS-05】SOVITS 模块-残差量化解析

【GPT-SOVITS-05】SOVITS 模块-残差量化解析

说明&#xff1a;该系列文章从本人知乎账号迁入&#xff0c;主要原因是知乎图片附件过于模糊。 知乎专栏地址&#xff1a; 语音生成专栏 系列文章地址&#xff1a; 【GPT-SOVITS-01】源码梳理 【GPT-SOVITS-02】GPT模块解析 【GPT-SOVITS-03】SOVITS 模块-生成模型解析 【G…
阅读更多...
基于背景差法的运动目标检测（车辆检测），Matlab实现

基于背景差法的运动目标检测（车辆检测），Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…
阅读更多...
基于sortablejs实现拖拽element-ui el-table表格行进行排序

基于sortablejs实现拖拽element-ui el-table表格行进行排序

可以用原生的dragstart、drag、dragend、dragover、drop、dragleave实现这个效果&#xff0c;但是有现成的轮子就不要重复造了&#xff0c;看效果&#xff1a; <template><el-table :class"$options.name" :data"tableData" ref"table"…
阅读更多...
【05】图解浏览器的渲染流程

【05】图解浏览器的渲染流程

浏览器的渲染流程 图示如下： 解析 HTML 浏览器从网络或本地文件中获取到 HTML 源代码，然后从上到下的解析源代码 若解析过程中，读取到 CSS 或 JS，停止解析（阻塞），转而解析 CSS 或执行 JS <!DOCTYPE html> <html lang="en"><head><…
阅读更多...
ES模块化

ES模块化

Node.js默认并不支持ES模块化&#xff0c;如果需要使用可以采用两种方式。方式一&#xff0c;直接将所有的js文件修改为mjs扩展名。方式二&#xff0c;修改package.json中type属性为module。 导出 默认导出 // 向外部导出内容 export let a 10 export const b "孙悟空…
阅读更多...
安卓安装Magisk面具以及激活EdXposed

安卓安装Magisk面具以及激活EdXposed

模拟器&#xff1a;雷电模拟器 安卓版本: Android9 文中工具下载链接合集&#xff1a;https://pan.baidu.com/s/1c1X3XFlO2WZhqWx0oE11bA?pwdr08s 前提准备 模拟器需要开启system可写入和root权限 一、安装Magisk 1. 安装magisk 将magisk安装包拖入模拟器 点击&#xff1a…
阅读更多...
数据结构/C++：红黑树

数据结构/C++：红黑树

数据结构/C&#xff1a;红黑树 概念实现基本结构插入uncle为红色节点uncle为黑色节点 总代码展示 概念 红黑树是一种二叉搜索树&#xff0c;一般的二叉搜索会发生不平衡现象&#xff0c;导致搜索效率下降&#xff0c;于是学者们开始探索如何让二叉搜索树保持平衡&#xff0c;这…
阅读更多...
玩转C语言——数组初探

玩转C语言——数组初探

一、前言 通过前面的学习&#xff0c;我们已了解C语言的结构变量、分支结构和循环结构。今天&#xff0c;我们一起来认识C语言的另一知识点——数组。先赞后看&#xff0c;养成习惯。 二、数组概念 学习数组&#xff0c;我们要明白数组是什么。在我看来&#xff1a;数组是⼀组…
阅读更多...
macOS 安装 NetLogo 6.4.0

macOS 安装 NetLogo 6.4.0

netlogo 下载地址 NetLogo-6.4.0.dmg参考 netlogo 官网
阅读更多...
sqllab第二十七关通关笔记

sqllab第二十七关通关笔记

知识点&#xff1a; union select 关键字过滤 通过<> /**/进行截断处理 un<>ion sel<>ect 没效果uni/**/on sel/**/ect 被过滤了双写绕过 这关对select进行了多重过滤&#xff0c;无法进行双写绕过 大小写绕过 UNion SElect (这关可以用&am…
阅读更多...
单片机第四季-第二课：uCos2源码-BSP

单片机第四季-第二课：uCos2源码-BSP

1&#xff0c;初始uCos2 文件中uC开头的为uCos相关的。 2&#xff0c;uCos2源码工程建立 建立Source Insight工程 寻找main函数 (1)RTOS其实就是一个大的裸机程序&#xff0c;也是从main开始运行的 (2)main之前也是有一个汇编的启动文件的 (3)main中调用了很多初始化函数 bsp部…
阅读更多...
linux——进程（1）

linux——进程（1）

目录 一、概念 1.1、认识进程 1.2、进程描述符&#xff08;PCB&#xff09; 1.3、进程的结构体&#xff08;task_struct&#xff09; 二、查看进程 三、获取进程的Pid和PPid 3.1、通过系统调用获取进程的PID和PPID 四、创建进程 4.1、fork() 4.2、用if进行分流 五、…
阅读更多...
【PyTorch】基础学习：一文详细介绍 torch.save() 的用法和应用

【PyTorch】基础学习：一文详细介绍 torch.save() 的用法和应用

【PyTorch】基础学习&#xff1a;一文详细介绍 torch.save() 的用法和应用 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f44…
阅读更多...
SpringCloudAlibaba系列之Seata实战

SpringCloudAlibaba系列之Seata实战

目录 环境准备 1.下载seata安装包 2.修改配置文件 3.准备seata所需配置文件 4.初始化seata所需数据库 5.运行seata 服务准备 分布式事务测试 环境准备 1.下载seata安装包 Seata-Server下载 | Apache Seata 本地环境我们选择稳定版的二进制下载。 下载之后解压到指定目录…
阅读更多...
HTML设置语言

HTML设置语言

一、代码示例 相关代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>HTML设置语言</title> </head> <body><marquee>我爱你</marquee> <!-- …
阅读更多...
2024年 前端JavaScript Web APIs 第三天 笔记

2024年 前端JavaScript Web APIs 第三天 笔记

3.1-表单全选反选案例 <!DOCTYPE html><html><head lang"en"><meta charset"UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid …
阅读更多...
CentOS 7 编译安装 Git

CentOS 7 编译安装 Git

CentOS 7 编译安装 Git 背景来源删除旧版本 Git安装依赖包下载 Git 源代码检验相关依赖&#xff0c;设置安装路径编译安装添加 Git 环境变量重新加载配置文件查看版本号参考文献 背景来源 为什么要安装新版本呢&#xff1f; 因为无聊&#xff0c;哈哈哈&#xff0c;其实也不是…
阅读更多...
【matlab】如何批量修改图片命名

【matlab】如何批量修改图片命名

【matlab】如何批量修改图片命名 (●’◡’●)先赞后看养成习惯&#x1f60a; 假如我的图片如下&#xff0c;分别是1、2、3、4、5的命名 需求一&#xff1a;假如现在我需要在其后面统一加上_behind字符串&#xff0c;并且保留原命名&#xff0c;同时替换掉原先的图片&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023