关于el-table+el-input+el-propover的封装

一、先放图片便于理解

需求: 

1、el-input触发focus事件,弹出el-table(当然也可以为其添加搜索功能、分页)

2、el-table中的复选共能转化成单选共能

3、选择或取消的数据在el-input中动态显示

4、勾选数据后,因为分页过多,原先选好的数据容易被埋没,在el-input里手动删除或添加触发input事件,el-table根据原有数据能检索到对应数据

5、若不通过勾选选择信息,手动添加,触发input事件,可一边输入一边检索是否存在所输入的数据

6、选择全部勾选无效

二、封装成组件之后的调用

view部分:

<selectUserInfo ref="selectUser" :inputUserData="form.quauser" @fatherSelect="selectMethod"></selectUserInfo>

 model部分:

  selectMethod(selection) {
//selection参数接收从子组件中传过来的被勾选的用户信息let common;
//通过字符串或数组类型来判断是在table页面勾选后回显input数据还是手动输入input数据if (selection instanceof Array) {
// 无论勾选多少个,只取最新勾选的用户数据let index = selection.length - 1 + ""common = selection[index];} else {
//规范输入操作,因为组件输入input框触发@input事件后根据“-”分割姓名和编号,进行实时检索,返回数据为空,这时操作者能及时修改输入内容,或者在输入过程中查找到对应数据直接勾选即可let reg = /.-[1-9][0-9]{7}$/if (!reg.test(selection)) {
//不符合格式规范,会导致el-input表单校验confirm校验不通过this.form.userInfo= "";return}}      },

三、实现过程

1】el-popover代码
<el-popoverplacement="right"width="400"trigger="click"><el-table :data="gridData" v-loading="loading" ref="userlist"  @select="handleSelectionChange":row-key="row => row.userId"><el-table-column width="150" property="date" label="日期"></el-table-column><el-table-column width="100" property="name" label="姓名"></el-table-column><el-table-column width="300" property="address" label="地址"></el-table-column></el-table><el-input slot="reference" v-model="inputUserDataCopy" style="width" @input="handleInput"><i slot="suffix" class="el-icon-search"></i></el-input>
</el-popover>
 2】elementUI el-popover源码分析
 3】复选框实现单选功能

思路:勾选数据之前取消所有的勾选

避坑:

1、在el-table标签中添加“:row-key='row=>row.userId'”实现勾选翻页的情况下保留勾选;

2、使用@select事件而不是@selection-change事件。在实现单选功能过程中,运用selection-change会发生反复触发以及反复调用函数的情况,就是通过api,clearSlection()和toggleRowSelection()改变的勾选状态也会触发selection-change绑定的方法。

 

触发@select事件后调用handleSelectionChange方法,js代码实现:

       handleSelectionChange(selection) { 
// 当勾选时,取消前一个勾选只选择最后一个 另selection-change是复选框发生该便时调用,由于取消以及toggleRowSelection也会触发会造成一直被调用的状态。select在选择时调用,更适合这里selection.forEach(row => {this.$refs.userlist.clearSelection();this.$refs.userlist.toggleRowSelection(row);});},
4】 勾选的数据按照“姓名-编号”格式显示到input输入框

1、触发@select事件后调用handleSelectionChange(selection)方法,selection参数获取到所勾选函数的用户信息。

2、通过$emit子组件调用父组件方法以及传值的方法,将用户数据传到父组件

 props: {inputUserData: {type: String,default: ""},},  
data(){return{inputUserDataCopy: ""}
},
methods:{handleSelectionChange(selection) { 
// 当勾选时,取消前一个勾选只选择最后一个 另selection-change是复选框发生该便时调用,由于取消以及toggleRowSelection也会触发会造成一直被调用的状态。select在选择时调用,更适合这里selection.forEach(row => {this.$refs.userlist.clearSelection();this.$refs.userlist.toggleRowSelection(row);});this.emit().then(() => {this.inputUserDataCopy = this.inputUserData;});},
//封装一个异步方法,因为要想input v-model绑定的属性发生改变,就不能在props接收的属性上直接操作
//在 this.inputUserDataCopy = this.inputUserData;赋值之前需要先把数据selection用户数据传到父组件emit() {return new Promise((resole, reject) => {this.$emit("fatherSelect", this.selection);resole(true)})},
}, 
5】 根据input值在table页面检索出对应的值
  handleInput() {
// 实现一边输入用户信息一边检索列表是否存在相应信息
//判断条件根据实际情况改变,之所这样是因为我需要“-”符号来区分名字和编号,以检索相应数据if (this.inputUserDataCopy.split("-").length > 1) {this.queryParams.userName = this.inputUserDataCopy.split("-")[1];this.queryParams.userName = this.inputUserDataCopy.split("-")[0];
//改变搜索条件,调用this.handleQuery()进行搜索(常规axios请求响应操作,不做解释)this.handleQuery();
//手动输入含“-”符号的信息会被传输到父组件,前面讲过的,会对这里传过去的数据进行正则test校验this.$emit("fatherSelect", this.inputUserDataCopy);}},

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

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

相关文章

【Linux网络】系统调优之聚合链路bonding,可以实现高可用和负载均衡

一、什么是多网卡绑定 二、聚合链路的工作模式 三、实操创建bonding设备&#xff08;mode1&#xff09; 1、实验 2、配置文件解读 3、查看bonding状态,验证bonding的高可用效果 三、nmcli实现bonding 一、什么是多网卡绑定 将多块网卡绑定同一IP地址对外提供服务&#xf…

aws亚马逊:什么是 Amazon EC2?

Amazon Elastic Compute Cloud&#xff08;Amazon EC2&#xff09;在 Amazon Web Services&#xff08;AWS&#xff09;云中按需提供可扩展的计算容量。使用 Amazon EC2 可以降低硬件成本&#xff0c;因此您可以更快地开发和部署应用程序。您可以使用 Amazon EC2 启动所需数量的…

Lua更多语法与使用

文章目录 目的错误处理元表和元方法垃圾回收协程模块面向对象总结 目的 在前一篇文章&#xff1a; 《Lua入门使用与基础语法》 中介绍了一些基础的内容。这里将继续介绍Lua一些更多的内容。 同样的本文参考自官方手册&#xff1a; https://www.lua.org/manual/ 错误处理 下…

原型模式(创建型)

一、前言 原型模式是一种创建型设计模式&#xff0c;它允许在运行时通过克隆现有对象来创建新对象&#xff0c;而不是通过常规的构造函数创建。在原型模式中&#xff0c;一个原型对象可以克隆自身来创建新的对象&#xff0c;这个过程可以通过深度克隆或浅克隆来实现。简单说原型…

【开源】基于Vue.js的生活废品回收系统的设计和实现

目录 一、摘要1.1 项目介绍1.2 项目详细录屏 二、研究内容三、界面展示3.1 登录注册3.2 资源类型&资源品类模块3.3 回收机构模块3.4 资源求购/出售/交易单模块3.5 客服咨询模块 四、免责说明 一、摘要 1.1 项目介绍 生活废品回收系统是可持续发展的解决方案&#xff0c;旨…

云效流水线docker部署 :node.js镜像部署VUE项目

文章目录 引言I 流水线配置1.1 项目dockerfile1.2 Node.js 镜像构建1.3 docker 部署引言 云效流水线配置实现docker 部署微服务项目:https://blog.csdn.net/z929118967/article/details/133687120?spm=1001.2014.3001.5501 配置dockerfile-> 镜像构建->docker部署。 …

【探索Linux】—— 强大的命令行工具 P.14(进程间通信 | 匿名管道 | |进程池 | pipe() 函数 | mkfifo() 函数)

阅读导航 引言一、进程间通信概念二、进程间通信目的三、进程间通信分类四、管道1. 什么是管道2. 匿名管道&#xff08;1&#xff09;创建和关闭⭕pipe() 函数⭕创建匿名管道⭕关闭匿名管道 &#xff08;2&#xff09;通信方式&#xff08;3&#xff09;用法示例&#xff08;4&…

NLP领域的突破催生大模型范式的形成与发展

当前的大模型领域的发展&#xff0c;只是范式转变的开始&#xff0c;基础大模型才刚刚开始改变人工智能系统在世界上的构建和部署方式。 1、大模型范式 1.1 传统思路&#xff08;2019年以前&#xff09; NLP领域历来专注于为具有挑战性的语言任务定义和设计系统&#xff0c…

Leetcode刷题详解—— 目标和

1. 题目链接&#xff1a;494. 目标和 2. 题目描述&#xff1a; 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 或 - &#xff0c;然后串联起所有整数&#xff0c;可以构造一个 表达式 &#xff1a; 例如&#xff0c;nums [2, 1] &#xff0c;可…

在GORM中使用并发

一个全面的指南&#xff0c;如何安全地使用GORM和Goroutines进行并发数据处理 效率是现代应用程序开发的基石&#xff0c;而并发在实现效率方面发挥着重要作用。GORM&#xff0c;这个强大的Go对象关系映射库&#xff0c;使开发人员能够通过Goroutines embrace并行性。在本指南…

男科医院服务预约小程序的作用是什么

医院的需求度从来都很高&#xff0c;随着技术发展&#xff0c;不少科目随之衍生出新的医院的&#xff0c;比如男科医院、妇科医院等&#xff0c;这使得目标群体更加精准&#xff0c;同时也赋能用户可以快速享受到服务。 当然相应的男科医院在实际经营中也面临痛点&#xff1a;…

最简WebClient 同步、异步调用示例

目录 一&#xff0c;序言二&#xff0c;简单示例1. 引入依赖2. 日志配置3. 调用代码4. 运行结果 三&#xff0c;完整代码 一&#xff0c;序言 WebClient是Spring WebFlux模块提供的一个非阻塞的基于响应式编程的进行Http请求的客户端工具&#xff0c;从Spring5.0开始WebClient…

C语言——求 n 以内(不包括 n)同时能被 3 和 7 整除的所有自然数之和的平方根 s,n 从键盘输入。

#define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> #include<math.h> int main() {int i,n;double s0.0;printf("输入任意一个自然数&#xff1a; ");scanf("%d",&n);for(i1;i<n;i) {if(i%30&&i%70){si;}}ssqrt(s);printf(…

软件测试现状以及行业分析

大家都知道最近 ChatGPT 爆火&#xff0c;国外巨头争相宣布自己的相关计划&#xff0c;国内有点实力的企业也在亦步亦趋地跟进。不出意料的是&#xff0c;关于测试职业要被淘汰的话题又&#xff08;为什么要说又&#xff1f;&#xff09;在扎堆出现&#xff0c;内容跟之前还是大…

带有滑动菜单指示器的纯 CSS 导航选项卡

效果展示 CSS 知识点 filter 属性回顾 transition 属性回顾 使用单选框实现导航菜单的思路 单选框当点击完成后就会有一个:checked属性&#xff0c;可以利用这个属性来实现导航菜单底部滑动块的滑动动画和当前菜单项激活状态的管理。 整体页面结构 <div class"tab…

MySQL查询时间处理相关函数与方法实践笔记

1. 实践案例 在查询mysql数据库获取数据时&#xff0c;有这样一个需求&#xff1a;按每30分钟分组获取电量数据&#xff0c;形成1天48个数据点。 方法一&#xff1a; select hour(a.CreateTime) 时点,case when MINUTE(a.CreateTime)<30 then 1 else 2 end 半小时,sum(a…

大数据Doris(二十一):数据导入演示

文章目录 数据导入演示 一、启动zookeeper集群(三台节点都启动) 二、启动hdfs集群

Leetcode -463.岛屿的周长 - 476.数字的补码

Leetcode Leetcode -463.岛屿的周长Leetcode - 476.数字的补码 Leetcode -463.岛屿的周长 题目&#xff1a;给定一个 row x col 的二维网格地图 grid &#xff0c;其中&#xff1a;grid[i][j] 1 表示陆地&#xff0c; grid[i][j] 0 表示水域。 网格中的格子 水平和垂直 方向…

AI:67-基于深度学习的脱机手写汉字识别

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌在这个漫长的过程,中途遇到了不少问题,但是…

探索微信小程序框架的精华——高质量的优秀选择

目录 引言&#xff1a; 1. 框架性能 2. 开发者工具支持 3. 文档和社区支持 4. 扩展能力 5. 使用率和稳定性 结语&#xff1a; 引言&#xff1a; 微信小程序作为一种轻量级、高效便捷的应用形式&#xff0c;已经在移动应用领域占据了重要地位。而其中&#xff0c;选择一个…