基于eleiment-plus的表格select控件

控件不是我写的,来源于scui,但在使用中遇到了一些问题,希望能把过程记录下来,同时把这个问题修复掉。
在使用的时候对控件进行二级封装,比如我的一个商品组件,再很多地方可以用到,于是

<template><sc-table-select :table-width="450" :apiObj="apiObj" @change="change" :props="props" :params="params"clearable    filterable><el-table-column label="编码" prop="code"></el-table-column><el-table-column label="名称" prop="name"></el-table-column><el-table-column label="规格型号" prop="model"></el-table-column><el-table-column label="税率(%)" prop="sl"></el-table-column><el-table-column label="品牌" prop="brand"></el-table-column><el-table-column label="产地" prop="producer"></el-table-column></sc-table-select>
</template>
<script lang="ts" setup>
import { ref,getCurrentInstance,computed   } from 'vue'
import { useAppStore } from '@/store'
const appStore = useAppStore()
const userInfo = computed(() => appStore.userInfo)
const { proxy }: any = getCurrentInstance();
const apiObj = proxy.$api.setting.findAccAaStock
const emits = defineEmits('selectData')const props = ref({label:'name',value:'id',keyword:'keyword'
})
const params = ref({asId:userInfo.value.currentAsId
})
// 值变化
const change = (val) =>{// 向上传递console.log(val)emits('selectData',val)
}
// 
</script>
<style lang="less" scoped></style>

1
控件使用

<stock-single-select v-model="scope.row.stockId" @selectData="val=>selectStock(val,scope.row)" ></stock-single-select>

保存和加载的时候,需要做一下处理,参考基于element-plus的Dialog选择控件中的做法
那么遇到的是什么问题呢?当设置了filterable属性,选择下拉表格中的行记录,这个表格不会关闭掉,只有当焦点失去的时候,这个对话框才会关闭掉。
我希望,当我选中行记录或者双击行记录,这条页面关闭。如何解决这个问题呢?思考中。。。

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

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

相关文章

【Python】一文详细介绍 plt.rc_context() 在 Matplotlib 中的原理、作用、注意事项

【Python】一文详细介绍 plt.rc_context() 在 Matplotlib 中的原理、作用、注意事项 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&a…

2024.3.11 C++作业

1、提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数要求使用C风格字符串完成 #include <iostream>using namespace std;int main() {char str[20];cout << "please enter the str:";gets(str);in…

linux GitLab 私有仓库的搭建

下载地址 gitLab 安装包下载地址&#xff1a;https://about.gitlab.com/install/ 环境准备&#xff1a; 环境&#xff1a;CentOS7.6 安装包&#xff1a;gitlab-ce-8.9.5-ce.0.el7.x86_64.rpm 硬件配置&#xff1a; 4G 安装步骤&#xff1a; 安装&#xff1a; [rootserver3 ~]…

Docker学习——Dock镜像

什么是Docker镜像 Docker 镜像类似于虚拟机镜像&#xff0c;可以将它理解为一个只读的模板。 一个镜像可以包含一个基本的操作系统环境&#xff0c;里面仅安装了 Apache 应用程序&#xff08;或 用户需要的其他软件&#xff09; 可以把它称为一个 Apache 镜像。镜像是创建 Do…

如何把一款App从无到有运营起来?都需要哪些资源?

引言 在这个数字化的时代&#xff0c;移动应用程序&#xff08;App&#xff09;如同现代社会的魔法手段&#xff0c;将我们与世界连接在一起。无论是寻找爱情的那一刻&#xff0c;还是享受美食的时光&#xff1b;无论是在城市喧嚣中找到宁静的那一刻&#xff0c;还是在孤寂时刻…

2024 年广东省职业院校技能大赛(高职组) “云计算应用”赛项样题⑤

2024 年广东省职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项样题⑤ 模块一 私有云&#xff08;50 分&#xff09;任务 1 私有云服务搭建&#xff08;10 分&#xff09;任务 2 私有云服务运维&#xff08;25 分&#xff09;任务 3 私有云运维开发&#xf…

软件杯 图像检索算法

文章目录 1 前言2 图像检索介绍(1) 无监督图像检索(2) 有监督图像检索 3 图像检索步骤4 应用实例5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 图像检索算法 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff…

c++之旅——第六弹

大家好啊&#xff0c;这里是c之旅第五弹&#xff0c;跟随我的步伐来开始这一篇的学习吧&#xff01; 如果有知识性错误&#xff0c;欢迎各位指正&#xff01;&#xff01;一起加油&#xff01;&#xff01; 创作不易&#xff0c;希望大家多多支持哦&#xff01; 一,静态成员&…

【rk3229 android7.1.2 替换默认输入法】

问题平台描述 问题描述解决方法 郑重声明:本人原创博文&#xff0c;都是实战&#xff0c;均经过实际项目验证出货的 转载请标明出处:攻城狮2015 Platform: Rockchip CPU:rk3229 OS:Android 7.1.2 Kernel: 3.10 问题描述 国内客户&#xff0c;觉得安卓自带的输入法不好用&#x…

智能警用装备柜管理系统|智能化可视化管理

智能警用装备柜管理系统|智能化可视化管理 我司&#xff08;JIONCH集驰&#xff09;警用装备管理系统&#xff08;智装备DW-S304&#xff09;是依托互云计算、大数据、RFID技术、数据库技术、AI、视频分析技术对警用装备进行统一管理、分析的信息化、智能化、规范化的系统。 智…

返回值不同算方法重载么?为什么?

1、典型回答 返回值不同不算方法重载 方法重载&#xff08;Overloading&#xff09;是指在同一个类中定义了多个同名方法&#xff0c;但它们的参数列表不同&#xff0c;方法重载要求方法&#xff1a; 名称相同参数类型、参数个数或参数顺序&#xff0c;至少有一个不同 方法…

分布式之LoadBalancer

一、LoadBalancer介绍 Spring Cloud LoadBalancer是Spring Cloud官方自己提供的客户端负载均衡器,抽象和实现&#xff0c;用来替代Ribbon&#xff08;已经停更&#xff09;&#xff0c; 二、Ribbon和Loadbalance 对比 组件组件提供的负载策略支持负载的客户端Ribbon随机 Ran…

[MYSQL数据库]--约束

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、空属性…

C++的学习

代码练习 输入一个字符串&#xff0c;统计其中大写字母、小写字母、数字、空格以及其他字符的个数 #include <iostream>using namespace std;int main() {cout << "请输入一个字符串" << endl;string str;getline(cin,str);int capital 0;int l…

HTTP/1.1 协议优化方案探讨

前言 HTTP/1.1 是目前广泛应用的网络协议之一&#xff0c;虽然已经存在多年&#xff0c;但我们仍然可以通过优化来提升其性能和效率。本文将从优化思路的角度出发&#xff0c;探讨如何在 HTTP/1.1 协议下实现优化&#xff0c;包括避免发送重复 HTTP 请求、减少 HTTP 请求次数、…

分享个好用的GPT网站

目录 一、背景 二、功能描述 1、写代码 2、联网查询 3、AI绘图 一、背景 我现在的开发工作都依靠ChatGPT&#xff0c;效率提升了好几倍。这样一来&#xff0c;我有更多时间来摸鱼&#xff0c;真是嘎嘎香~ ⭐⭐⭐点击直达 ⭐⭐⭐ 二、功能描述 1、写代码 import java.ut…

portainer管理远程docker和docker-swarm集群

使用前请先安装docker和docker-compose&#xff0c;同时完成docker-swarm集群初始化 一、portainer-ce部署 部署portainer-ce实时管理本机docker&#xff0c;使用docker-compose一键拉起 docker-compose.yml version: 3 services:portainer:container_name: portainer#imag…

制冷系统管道焊接气焊安全操作

气焊操作安全教育&#xff1a; 1、检查气焊用具完好牢固无损&#xff0c;不得贴粘有&#xff08;机油&#xff09;&#xff1b; 2、气瓶余压&#xff08;2KG&#xff09;停止使用&#xff1b;清除动火 10 米范围内易燃易爆物料&#xff1b; 3、库房内动火要 做好通风排气&…

海格里斯HEGERLS智能托盘四向车系统为物流仓储自动化升级提供新答案

随着实体企业面临需求多样化、订单履行实时化、商业模式加速迭代等挑战&#xff0c;客户对物流仓储解决方案的需求也逐渐趋向于柔性化、智能化。作为近十年来发展起来的新型智能仓储设备&#xff0c;四向车系统正是弥补了先前托盘搬运领域柔性解决方案的空白。随着小车本体设计…

仅需 5% 训练样本达到最优性能,清华大学研究团队发布条件去噪扩散模型 SPDiff,实现长程人流移动模拟

人流移动模拟 (Crowd Simulation) 是在特定情境中模拟大量人员移动的过程。这项技术主要应用于计算机游戏、城市规划、建筑设计以及交通组织等领域。例如&#xff0c;模拟人群在不同条件&#xff08;如人群密度、流量等&#xff09;下在建筑物内的移动&#xff0c;帮助决策者评…