vue-tabel 中使用 el-autocomplete 出现的问题

必须加   :popper-append-to-body="false"

             :popper-class="vxetableignoreclear"

我自己用的话缺一不可

说一下我自己项目中遇到的问题吧,我写的是表格中套表格,会出现就是当下拉选的时候用@selete是可以用的,但是用@blur也可以触发 , 但是仅限于 失去焦点点在表格内才会触发,

在其他地方是不会触发的

我查了一下原因  Element-UI el-select和el-autocomplete的select  是冲突了

在二级表格的时候我就只用了@change  方法

  

但是这还里面还有一个bug   就是输入的时候后面会有一个小删除按钮,当我点击删除的时候,@change事件传的值不是为空,而是修改之前的值   索性我就不用×   直接把他disaplay :none 了

所以

1、如果说没有嵌套表格, 用为下面的代码就可以

2、如果有嵌套表格,且el-autocomplete在二级, 那么方法只用@change   , 且把x  隐藏掉

完整代码

<template><div><vxe-tablebordershow-overflow:data="tableData":column-config="{ resizable: true }":edit-config="{ trigger: 'dblclick', mode: 'cell' }"><vxe-column type="seq" width="60"></vxe-column><vxe-column field="name" title="Name" :edit-render="{}"><template #edit="{ row, rowIndex }"><el-autocompleteclass="inline-input w-50"v-model="row.name":popper-class="vxetableignoreclear":fetch-suggestions="querySearch"clearableplaceholder=""@change="threeInput(row, rowIndex, Frow)"@select="threeInput(row, rowIndex, Frow)":popper-append-to-body="false"/></template></vxe-column></vxe-table></div>
</template><script setup>
import { ref } from "vue";
let vxetableignoreclear = ref("vxe-table--ignore-clear");
const tableData = ref([{id: 10001,name: "Test1",role: "Develop",sex: "Man",age: 28,address: "test abc",},{id: 10002,name: "Test2",role: "Test",sex: "Women",age: 22,address: "Guangzhou",},{id: 10003,name: "Test3",role: "PM",sex: "Man",age: 32,address: "Shanghai",},{id: 10004,name: "Test4",role: "Designer",sex: "Women",age: 24,address: "Shanghai",},
]);
let restaurants = ref([{ label: "111", value: "111" },{ label: "222", value: "222" },{ label: "333", value: "333" },{ label: "444", value: "444" },{ label: "555", value: "555" },{ label: "666", value: "666" },
]);
//下拉
const querySearch = (queryString, cb) => {const results = queryString? restaurants.value.filter(createFilter(queryString)): restaurants.value;cb(results);
};
const createFilter = (queryString) => {return (restaurant) => {return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);};
};const threeInput = (row, rowIndex, Frow) => {console.log(row, rowIndex, Frow, "111");
};
</script><style scoped lang="less">
/* //去除下拉×小图标 */
:deep(.el-input__suffix-inner) {display: none;
}
</style>

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

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

相关文章

Revit SDK 介绍:TraverseSystem 用广度遍历的方式遍历MEP系统

前言 这个例子介绍了用广度遍历的方式遍历MEP系统。 内容 打开 Revit 自带例子&#xff0c;选择红框中的某条风管&#xff0c;不要选择机械&#xff0c;图中选中只是为了和遍历结果对应&#xff1a; 红色区域到风管机的遍历结果&#xff1a; 核心逻辑 遍历逻辑主函数&am…

【Vue】vue2使用vue-pdf预览pdf文件,预览多页,在线预览方式二,vue页面内预览,无需额外pdfjs包,保姆级教程

系列文章目录 【Vue】vue2预览显示quill富文本内容&#xff0c;vue-quill-editor回显页面&#xff0c;v-html回显富文本内容 【Vue】vue2项目使用swiper轮播图2023年8月21日实战保姆级教程 【Vue】vue2使用pdfjs预览pdf文件&#xff0c;在线预览方式一&#xff0c;pdfjs文件包…

【海思SS626 | 开发环境】VMware17安装Ubuntu 18.04.6

目录 一、下载 Ubuntu 18.04.6 LTS二、VMware17创建虚拟机三、安装Ubuntu18.04LTS四、安装其他软件五、总结 一、下载 Ubuntu 18.04.6 LTS 问题&#xff1a;为什么要下载 Ubuntu18.04.6 LTS 而不是使用最新的&#xff0c;或者其他Linux发行版&#xff1f; 答&#xff1a;在ss6…

ChatGPT AIGC 实现Excel行列多条件交叉查找

查找函数在Excel中一直是非常重要的知识点,我们让ChatGPT AIGC来总结一下关于查找函数的优点与了处。 Excel中的查找函数是一种非常强大且多用途的工具,具有以下优点和作用: 1. 数据定位:查找函数可以帮助我们在大量数据中快速定位某个特定的数据或信息。 2. 数据整理:如…

JAVA -华为真题-分奖金

需求: 公司老板做了一笔大生意&#xff0c;想要给每位员工分配一些奖金&#xff0c;想通过游戏的方式来决定每个人分多少钱。按照员工的工号顺序&#xff0c;每个人随机抽取一个数字。按照工号的顺序往后排列&#xff0c;遇到第一个数字比自己数字大的&#xff0c;那么&#xf…

TRT4-trt-integrate -self-driving道路分析

1#先看ONNX 查看大概结构 首先我们来看一下这个onnx&#xff1a; 可以看到这是一个全卷积网络&#xff0c;因为输入输出的宽高都一样 后来的这里是加入了softmax&#xff0c;所以获得的是概率值&#xff0c;所以最终的输出output是1*512*596*4的概率值。仅仅是不确定四个通道代…

5.后端·新建子模块与开发(自动模式)

文章目录 学习资料自动生成模式创建后端三层 学习资料 https://www.bilibili.com/video/BV13g411Y7GS?p11&spm_id_frompageDriver&vd_sourceed09a620bf87401694f763818a31c91e 自动生成模式创建后端三层 首先&#xff0c;运行起来若依的前后端整个项目&#xff0c;…

css画一条渐变的虚线

效果展示 原理&#xff1a;给元素设置一个渐变的背景色&#xff0c;画一条白色的虚线盖住背景&#xff0c;就达到了渐变虚线的效果 代码&#xff1a; <div class"pending-line"></div>.pending-line{width: 101px;border-top: 2px dashed #fff; // do…

豆瓣图书评分数据的可视化分析

导语 豆瓣是一个提供图书、电影、音乐等文化产品的社区平台&#xff0c;用户可以在上面发表自己的评价和评论&#xff0c;形成一个丰富的文化数据库。本文将介绍如何使用爬虫技术获取豆瓣图书的评分数据&#xff0c;并进行可视化分析&#xff0c;探索不同类型、不同年代、不同…

计算机网络第三节物理层

目录 一&#xff0c;第二章 物理层&#xff08;数据通信有关&#xff09; 1.物理层引入的目的 2.物理层如何实现屏蔽 二&#xff0c;物理层引入的数据通信基础 1.通信模型 2.通信模型中的技术术语 三&#xff0c;数据通信的基础知识 1&#xff0c;数据通信模型 2&…

BIO NIO AIO演变

Netty是一个提供异步事件驱动的网络应用框架&#xff0c;用以快速开发高性能、高可靠的网络服务器和客户端程序。Netty简化了网络程序的开发&#xff0c;是很多框架和公司都在使用的技术。 Netty并非横空出世&#xff0c;它是在BIO&#xff0c;NIO&#xff0c;AIO演变中的产物…

一文读懂LCD、OLED、LED屏的区别以及透明液晶屏原理

参考文章科普&#xff5c;一文读懂LCD、LED和OLED 的区别 - 知乎 参考文章透明液晶显示屏的原理&#xff1f; - 知乎 一、LCD LCD是英文Liquid Crystal Display 的简称&#xff0c;指的是液晶显示屏。 主要想介绍下LCD透明屏方案&#xff1a; 所谓LCD透明屏&#xff0c;并…

记录一次对登录接口的性能测试

测试环境 客户端: win10 这里可以用linux,但没用,因为想直观查看结果。 被测环境:linux X86 4核CPU16G内存 被测接口:登录接口,没有做数据驱动。 场景设计 设置线程数19,持续时间5分钟,并用后端监听器监听结果,使用grafana+prometheus监控服务器资源。 测试执行 …

思维导图怎么变成ppt?4个思维导图一键生成ppt的方法

做好的思维导图如何变成一份ppt&#xff1f;本文罗列了4个可行方法&#xff0c;一起来看看吧。 一 直接复制粘贴 这是最简单的方法&#xff0c;虽然这样可能会花费一些时间&#xff0c;但可以确保内容排版和布局与你想要的一致。当然&#xff0c;我们大可使用更高效的方法。…

成绩定级脚本(Python)

成绩评定脚本 写一个成绩评定的python脚本&#xff0c;实现用户输入成绩&#xff0c;由脚本来为成绩评级&#xff1a; #成绩评定脚本.pyscoreinput("please input your score:") if int(score)> 90:print("A") elif int(score)> 80:print("B&…

MATLAB | 绘图复刻(十二) | 桑基图+气泡图

hey 绘图复刻居然已经出到第十二期&#xff0c;破百指日可待hiahiahia&#xff0c;今天来复刻一下 Yu, W., Wang, Z., Yu, X. et al. Kir2.1-mediated membrane potential promotes nutrient acquisition and inflammation through regulation of nutrient transporters. Nat …

Git 基本操作【本地仓库与远程仓库的推送、克隆和拉取】

文章目录 一、Git简介二、Git的下载安装三、Git常规命令四、新建本地仓库五、本地分支操作六、Git远程仓库七、远程仓库克隆、抓取和拉取八、总结九、学习交流 一、Git简介 Git是分布式版本控制系统&#xff08;Distributed Version Control System&#xff0c;简称 DVCS&…

c#动态保留小数位数的数值格式化方法实例----从小数点后非零数字保留两位进行四舍五入

c#动态保留小数位数的数值格式化方法实例----从小数点后非零数字保留两位进行四舍五入 功能介绍代码案例输出结果封装扩展方法控制台调用 其他方法地址 功能介绍 1. 输入的数字是整数&#xff0c;则直接返回整数部分的字符串表示。 2. 如果输入的数字是小数&#xff0c;则执行…

自动驾驶汽车下匝道路径优化控制策略研究

摘要 随着社会不断进步&#xff0c; 经济快速发展&#xff0c; 科学技术也在突飞猛进&#xff0c; 交通行业是典型的领域之一。现阶段的交通发展&#xff37; 实现智能交通系统为目标&#xff0c; 正逐渐从信息化步入智能化&#xff0c;朝着智慧化迈进。近年来&#xff0c;一系…

Jenkins List Git Branches插件 构建选择指定git分支

List Git Branches Parameter | Jenkins pluginAdds ability to choose from git repository revisions or tagshttps://plugins.jenkins.io/list-git-branches-parameter/ 1、安装组件 List Git Branches 2、验证功能 1&#xff09;新建任务 2&#xff09;新增构建参数 3&…