基于eleiment-plus的表格select控件

news2024/10/5 19:19:18

控件不是我写的,来源于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.coloradmin.cn/o/1509964.html

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

相关文章

SQLiteC/C++接口详细介绍-sqlite3类(一)

上一篇&#xff1a;SQLiteC/C接口简介 下一篇&#xff1a;SQLiteC/C接口详细介绍&#xff08;二&#xff09; 引言&#xff1a; SQLite C/C 数据库接口是一个流行的SQLite库使用形式&#xff0c;它允许开发者在C和C代码中嵌入 SQLite 基本功能的解决方案。通过 SQLite C/C 数据…

ElementUI两个小坑

1.form表单绑定的是一个对象&#xff0c;表单里的一个输入项是对象的一个属性之一&#xff0c;修改输入项&#xff0c;表单没刷新的问题&#xff0c; <el-form :model"formData" :rules"rules" ref"editForm" class"demo-ruleForm"…

MyFileServer3

信息收集 # nmap -sn 192.168.101.0/24 -oN live.nmap Starting Nmap 7.94 ( https://nmap.org ) at 2024-02-22 19:14 CST Nmap scan report for 192.168.101.1 Host is up (0.00050s latency). MAC Address: 00:50:56:C0:00:08 (VMware) Nmap scan report fo…

R语言tidycmprsk包分析竞争风险模型

竞争风险模型就是指在临床事件中出现和它竞争的结局事件&#xff0c;这是事件会导致原有结局的改变&#xff0c;因此叫做竞争风险模型。比如我们想观察患者肿瘤的复发情况&#xff0c;但是患者在观察期突然车祸死亡&#xff0c;或者因其他疾病死亡&#xff0c;这样我们就观察不…

GO语言-切片底层探索(上)

目录 1.前言 2. 算法题目 错误代码 3. 错误分析 4.总结&#xff1a; 5.正确代码&#xff1a; 6.本地测试代码&#xff1a; 1.前言 今天在力扣上写算法&#xff0c;遇到了一个比较"奇怪"的错误。由于自己使用了递归切片&#xff0c;导致一开始没有看明白&…

vue学习笔记23-组件事件⭐

组件事件 在组件的模板表达式中&#xff0c;可以直接使用$emit方法触发自定义事件&#xff1b;触发自定义事件的目的是组件之间传递数据 好好好今天又碰到问题了&#xff0c;来吧来吧 测试发现其他项目都可以 正常的run ,就它不行 搜索发现新建项目并进入以后&#xff0c;用指…

【刷题日志3.4--3.10】

绕过flag关键字od读取&#xff08;脚本&#xff09;空格过滤 [广东强网杯 2021 团队组]love_Pokemon <?php error_reporting(0); highlight_file(__FILE__); $dir sandbox/ . md5($_SERVER[REMOTE_ADDR]) . /;if(!file_exists($dir)){mkdir($dir); }function DefenderBon…

(vb-asp.net)lw-学生信息管理系统(学生成绩管理,补考考场分配)-158-(代码+说明)

转载地址: http://www.3q2008.com/soft/search.asp?keywordasp.net&#xff09;lw 非常不错! 有兴趣的可以咨询客服, 或下载演示查看 目 录 ABSTRACT 3 1&#xff0e; 系统规划 6 1&#xff0e;3 需求分析 6 1&#xff0e;3&#xff0e;1 功能需求 6 通过了解学生管理系统…

HTTP/2、HTTP/3对HTTP/1.1的性能改进和优化

HTTP/1.1 相比 HTTP/1.0 提高了什么性能&#xff1f; 性能上的改进&#xff1a; 使用长连接的方式改善了 HTTP/1.0 短连接造成的性能开销。 支持管道&#xff08;pipeline&#xff09;网络传输&#xff0c;只要第一个请求发出去了&#xff0c;不必等其回来&#xff0c;就可以…

C++14之std::index_sequence和std::make_index_sequence

相关文章系列 std::apply源码分析 C之std::tuple(一) : 使用精讲(全) 目录 1.std::integer_sequence 2.std::index_sequence 3.std::make_index_sequence 4.运用 4.1.打印序列的值 4.2.编译时求值 4.3.std::tuple访问值 5.总结 1.std::integer_sequence 运行时定义一个…

OSI七层模型TCP四层模型横向对比

OSI 理论模型&#xff08;Open Systems Interconnection Model&#xff09;和TCP/IP模型 七层每一层对应英文 应用层&#xff08;Application Layer&#xff09; 表示层&#xff08;Presentation Layer&#xff09; 会话层&#xff08;Session Layer&#xff09; 传输层&#x…

【JavaScript】面试手撕深拷贝

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 深拷贝的作用深浅拷贝的区别浅拷贝深拷贝 深拷贝实现方式JSON.parse(JSON.stringi…

开发知识点-python-Tornado框架

介绍 Tornado是一个基于Python语言的高性能Web框架和异步网络库&#xff0c;它专注于提供快速、可扩展和易于使用的网络服务。由于其出色的性能和灵活的设计&#xff0c;Tornado被广泛用于构建高性能的Web应用程序、实时Web服务、长连接的实时通信以及网络爬虫等领域。 Torna…

【物联网设备端开发】FastBee Arduino固件开发指南

目录 一、收集数据 二、打开FastBeeArduino 源码 三、修改 Config.cpp 文件 四、修改物模型数据 五、小程序配网 本文以 WeMOS D1 R1&#xff08;8266WIFI 模块&#xff09;固件开发为例&#xff0c;实现以下功能&#xff1a; 设备认证设备 Mqtt 交互Wifi 类设备配网 一…

ffmpeg解码和渲染理解

ffmpeg解码和渲染理解 ffmpeg视频解码步骤 FFmpeg 是一个功能强大的跨平台多媒体处理工具&#xff0c;包含了音视频编解码、封装/解封装、过滤器等功能。下面是一般情况下使用 FFmpeg 进行视频解码的步骤&#xff1a; 初始化 FFmpeg 库&#xff1a;首先需要初始化 FFmpeg 库&a…

SAM(Segment Anything Model)大模型使用--point prompt

概述 本系列将做一个专题&#xff0c;主要关于介绍如何在代码上运行并使用SAM模型以及如何用自己的数据集微调SAM模型&#xff0c;也是本人的毕设内容&#xff0c;这是一个持续更新系列&#xff0c;欢迎大家关注~ SAM&#xff08;Segment Anything Model&#xff09; SAM基于…

自然语言处理的概念及发展介绍

自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是计算机科学、人工智能和语言学的交叉领域&#xff0c;旨在使计算机能够理解、解释和生成人类语言。自然语言处理的发展对于实现人机交互、信息检索、机器翻译、情感分析等应用至关重要。 概念…

【Java设计模式】十五、命令模式

文章目录 1、命令模式2、案例3、总结 1、命令模式 餐厅点餐&#xff1a; 创建一个厨师对象&#xff0c;让服务员对象调用厨师对象中的方法进行点餐通知&#xff0c;当后面厨师换人&#xff0c;服务员类的代码也要修改&#xff0c;耦合 不符合开闭。理想状态&#xff1a;服务员…

JVM 垃圾回收相关

一、什么是垃圾 目录 一、什么是垃圾回收 二、 死亡对象的判断算法 a) 引用计数算法 b)可达性分析算法 三、垃圾回收算法 a) 标记-清除算法 b) 复制算法 c) 标记-整理算法 d) 分代算法 回收 垃圾回收&#xff08;Garbage Collection&#xff0c;简称GC&#xff09;是…

考研C语言复习初阶(5)

目录 一.表达式求值 1.1隐式类型转换 1.2 算术转换 12.3 操作符的属性 二. 指针是什么&#xff1f; 三 指针和指针类型 3.1 指针-整数 3.2 指针的解引用 3.3 野指针 四.指针运算 4.1 指针-整数 4.2 指针-指针 4.3 指针的关系运算 5. 指针和数组 6. 二级指针 …