当前位置: 首页 > news >正文

el-select 支持多选 搜索远程数据 组件抽取

el-select 支持多选 搜索远程数据 组件抽取

  • 使用方式
import selectView from './components/selectView'<el-form><el-form-item label="选择器"><selectView v-model="selValue" @change="handleChange"></el-form-item>
</el-form>
  • 组件
 <template><el-selectv-model="selectValue":multiple="multiple":filterable="true":remote="true"@focus="selectFocus":clearable="true":placeholder="placeholder":remote-method="remoteMethod":loading="selectLoading"@change="handleChange"style="width: 100%;"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select>
</template>
<script>
import { userListAll } from "@/utils/api.js";
export default {props: {// v-model绑定 返回 1,2,3 或 传入 1,2,3 id值value: {type: [String, Number],default: "",},placeholder: {type: String,default: "请选择",},multiple: {type: Boolean,default: true,},},computed: {currentValue: {get: function() {if (this.value) {return this.value.split(",");}return [];},set: function(val) {this.$emit("input", val.join(","));},},},data() {return {selectValue: "",options: [], //存储下拉框的数据selectEnterpriseForm: {nickName: "",},selectLoading: false,};},mounted() {this.selectEnterprise("");},methods: {selectEnterprise(query) {//query用户搜索的值this.selectEnterpriseForm = this.$options.data().selectEnterpriseForm; //清空数据this.selectEnterpriseForm.nickName = query;userListAll({...this.selectEnterpriseForm,}).then(res => {this.options = [];this.selectLoading = false;this.addLoading = false;res.data.forEach(element => {this.options.push({value: element.userId + "",label: element.nickName,});});if (this.currentValue.length > 0) {this.selectValue = this.currentValue;}}).catch(err => {});},remoteMethod(query) {this.selectLoading = true;this.selectEnterprise(query);},selectFocus() {this.options = [];this.selectLoading = true;this.selectEnterprise("");},handleChange(val) {this.currentValue = val;let nameList = [];val.forEach(item => {this.options.forEach(element => {if (item == element.value) {nameList.push(element.label);}});});// 将1,2,3 和 张三,李四,王五 返回this.$emit("change", val.join(","), nameList.join(","));},},
};
</script>
<style lang="scss" scoped>
// .con {
// 	display: inline-block;
// 	width: 100%;
// }
</style>

相关文章:

el-select 支持多选 搜索远程数据 组件抽取

el-select 支持多选 搜索远程数据 组件抽取 使用方式 import selectView from ./components/selectView<el-form><el-form-item label"选择器"><selectView v-model"selValue" change"handleChange"></el-form-item> …...

el-table纵向垂直表头

参考&#xff1a;https://www.jianshu.com/p/1f38eaffd070 <el-tablestyle"width: 100%":data"getValues":show-header"false"border:cell-style"cellStyle" ><el-table-columnv-for"(item, index) in getHeaders"…...

Pinyin4j介绍和简单使用

前言 Pinyin4j是一个Java库&#xff0c;用于将汉字转换为拼音。它是由中国清华大学的Tsinghua University和中国科学院计算技术研究所的研究人员开发的。Pinyin4j可以用于Java应用程序中&#xff0c;以便在需要时将汉字转换为拼音。例如&#xff0c;它可以用于中文输入法、文本…...

【数据结构】查找

【数据结构】查找 数据结构中&#xff0c;有顺序查找、二分查找、散列查找、插值查找、斐波那契额查找 1.顺序查找 条件&#xff1a;待查找的元素与数组中的元素按顺序排列。算法&#xff1a;从数组的第一个元素开始&#xff0c;逐个比较&#xff0c;直到找到目标元素或遍历完…...

第一次面试

1.多态的原理 2.编译原理 3.HTTPS的加密原理 4.说一说C11新特性 5.平时用过哪些STL容器 6.STL的比较器 原来就是自定义工具类hhhhhh 7.函数指针用过吗 8.I/O多路复用 9.Redis 问的基本都背过&#xff0c;但是一紧张啥都忘了hhhhhhhhh...

Nacos配置文件更新+热更新+多环境配置共享+集群搭建

对服务配置文件 场景&#xff1a; 如果多个服务对应的配置文件都需要更改时&#xff0c;可以利用配置管理&#xff0c;方便对配置文件进行更新&#xff0c;而且是在本地配置前先读取nacos的配置文件&#xff0c;优先级大于本地配置文件 配置步骤 1.首先在Nacos中的配置列表中增…...

李宏毅-机器学习hw4-self-attention结构-辨别600个speaker的身份

一、慢慢分析学习pytorch中的各个模块的参数含义、使用方法、功能&#xff1a; 1.encoder编码器中的nhead参数&#xff1a; self.encoder_layer nn.TransformerEncoderLayer( d_modeld_model, dim_feedforward256, nhead2) 所以说&#xff0c;这个nhead的意思&#xff0c;就…...

记一次使用NetworkManager管理Ubuntu网络无效问题分析

我们都知道CentOS、Redhat系列网络配置比较连贯&#xff0c;要么在/etc/sysconfig/network-scripts/ifcfg-网络设备名&#xff0c;文件中编辑后&#xff0c;重启网络服务&#xff1b;要么使用nmtui或者nmcli进行配置。但是&#xff0c;Ubuntu变动就比较大&#xff1a; 早期版本…...

Nginx重写功能

Nginx重写功能 一、Nginx常见模块二、访问路由location2.1location常用正则表达式2.2、location的分类2.3、location常用的匹配规则2.4、location优先级排列说明2.5、location示例2.6、location优先级总结2.7、实例2.7.1、location/{}与location/{}2.7.2、location/index.html{…...

王道考研计算机网络

文章目录 计算机网络体系结构计算机网络概述计算机网络的性能指标 计算机网络体系结构与参考模型错题 物理层通信基础基础概念奈奎斯特定理和香农定理编码与调制电路交换、报文交换和分组交换数据报与虚电路 传输介质物理层设备错题 数据链路层数据链路层的功能组帧差错控制检错…...

数据链路层重点协议-以太网

以太网简介 "以太网" 不是一种具体的网络&#xff0c;而是一种技术标准&#xff1b;既包含了数据链路层的内容&#xff0c;也包含了 一些物理层的内容。例如&#xff1a;规定了网络拓扑结构&#xff0c;访问控制方式&#xff0c;传输速率等&#xff1b; 以太网数据帧…...

学习计划

白驹过隙&#xff0c;转眼已是大二。新学期&#xff0c;新气象&#xff0c;新计划。 一、专业学习方面 学习vue、spring boot、redis、MybatisPlus、Elasticsearch、ssm框架&#xff0c;完成项目的编写&#xff0c;思考复盘。 二、读书方面 因为我大概率会走前端方向&#xff0…...

RabbitMQ的RPM包安装和Python读写操作

下载地址 ## erlang 下载地址 https://packagecloud.io/rabbitmq/erlang?page6## rabbitmq 下载地址 https://packagecloud.io/rabbitmq/rabbitmq-server/packages/el/7/rabbitmq-server-3.8.29-1.el7.noarch.rpm?distro_version_id140 Rabbitmq的RPM包安装 ## 下载 wget -…...

文件上传漏洞案例

目录 1.案例一 1&#xff09;案例源码 2&#xff09;创建web.php文件 3&#xff09;使用抓包软件 2.案例二 1&#xff09;案例代码 2&#xff09; 案例分析 3&#xff09;copy命令生成图片马 4&#xff09;上传图片马到服务器 5&#xff09;解析 文件图片 3.案例三 …...

Office365 Excel中使用宏将汉字转拼音

Office365 Excel中开启宏 文件 - 选项 - 信任中心 - 信任中心设值 - 宏设值 启用VBA宏启用VBA宏时启用Excel 4.0宏信任对VBA工程对象模型的访问 创建宏 视图 - 查看宏 填写名字创建宏&#xff1a;getpy填入下面代码保存&#xff0c;点击否&#xff0c;另存类型为“excel启…...

baichuan2(百川2)本地部署的实战方案

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…...

PostgreSQL配置主从备份(docker)

一、服务器规划 序号 IP 备注 1192.168.1.110主数据库2192.168.1.120从数据库 二、服务器部署 2.1、主服务器部署&#xff08;192.168.1.110&#xff09; 1&#xff09;、于/opt/postgresql目录下&#xff0c;编辑docker-compose.yml version: "3" services:po…...

qt作业day4

//clock_exercise.cpp#include "clock_timer.h" #include "ui_clock_timer.h"//时间事件处理函数 void Clock_Timer::timerEvent(QTimerEvent *event) {if(event->timerId() time_id){sys_tm QDateTime :: currentDateTime(); // int year sy…...

js如何实现字符串反转?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用 split() 和 reverse() 方法⭐ 使用循环⭐ 使用递归⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专…...

Nmap 7.94 发布:新功能!

Nmap 的最新版本 7.94 在其 26 岁生日之际发布。 最重要的升级是在所有平台上将 Zenmap 和 Ndiff 从 Python 2 迁移到 Python 3。 这个新版本的 Nmap 7.94 进行了升级&#xff0c;进行了多项改进&#xff0c;修复了一些关键错误&#xff0c;并添加了新的 Npcap、操作系统指纹…...

【深入解析spring cloud gateway】08 Reactor 知识扫盲

一、响应式编程概述 1.1 背景知识 为了应对高并发服务器端开发场景&#xff0c;在2009 年&#xff0c;微软提出了一个更优雅地实现异步编程的方式——Reactive Programming&#xff0c;我们称之为响应式编程。随后&#xff0c;Netflix 和LightBend 公司提供了RxJava 和Akka S…...

常用ADB指令

ADB指令 1.查看版本 adb shell getprop|findstr fingerprint 2.查看应用包名 adb shell pm list packages 3.查看系统关键字 adb shell getprop|findstr oem/sn/user… 4.查看进程id adb shell ps -ef |grep appstore 5.启动服务 adb shell am startservice -n com.a…...

【HTML5高级第二篇】WebWorker多线程、EventSource事件推送、History历史操作

文章目录 一、多线程1.1 概述1.2 体会多线程1.3 多线程中数据传递和接收 二、事件推送2.1 概述2.2 onmessage 事件 三、history 一、多线程 1.1 概述 前端JS默认按照单线程去执行&#xff0c;一段时间内只能执行一件事情。举个栗子&#xff1a;比方说古代攻城游戏&#xff0c…...

CentOS云服务器部署配置

1. 安装Mysql 1.1.确保服务器系统处于最新状态 [rootlocalhost ~]# yum -y update如果显示内容中含有 [rootlocalhost ~]# Complete! 说明更新完成 1.2.下载MySql安装包 rootlocalhost ~]# rpm -ivh http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm…...

深入解析Java中的数组复制:System.arraycopy、Arrays.copyOf和Arrays.copyOfRange

当涉及到在Java中处理数组时&#xff0c;有许多方法可供选择&#xff0c;其中一些包括System.arraycopy()、Arrays.copyOf()和Arrays.copyOfRange()。这些方法允许您在不同的数组之间复制数据&#xff0c;但它们之间有一些细微的差异。在本篇博客文章中&#xff0c;我们将深入探…...

libc和glibc有什么区别

libc&#xff08;C Library&#xff09;是一个常见的术语&#xff0c;指的是C语言的标准函数库&#xff0c;提供了许多函数和常量供C语言程序使用。在不同的操作系统中&#xff0c;libc可能是不同的&#xff0c;但是它们都实现了C语言的标准库函数。 glibc&#xff08;GNU C L…...

基于SSM的在线云音乐系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

构建高效的BFF(Backend for Frontend):优化前端与后端协作

面试题分享 2023最新面试合集链接 2023大厂面试题PDF 面试题PDF版本 java、python面试题 项目实战:AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接 玩转cloud Studio 在线编码神器 玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间 史上最全文档AI绘画stab…...

喜报 | 实力亮相2023服贸会,擎创科技斩获领军人物奖创新案例奖

近日&#xff0c;由中华人民共和国商务部、北京市人民政府共同主办的中国&#xff08;北京&#xff09;国际服务贸易交易会&#xff08;简称服贸会)已圆满落幕。 本次会议中&#xff0c;发布了2023年度“数智影响力”征集活动获奖名单&#xff0c;擎创科技创始人兼CEO杨辰获企…...

科技革新自动驾驶:拓世AI智能助理携手跟您一起点亮未来之旅

科技改变生活&#xff0c;智能改变世界&#xff0c;近年来&#xff0c;随着科技的不断进步&#xff0c;政策和市场的赋能推动&#xff0c;自动驾驶已经成为当今社会最炙手可热的话题之一。从其中的技术发展趋势来看&#xff0c;我国自动驾驶模式正由单车智能向车路协同时代演进…...

web前端开发初级/重庆网站优化

根据业务定制自动安装CentOS 过几天机房要上架29台服务器&#xff0c;需要装系统。机器太多&#xff0c;想自动化安装&#xff0c;由于没测试机&#xff0c;实验都在虚拟机实现&#xff0c;为了能快点部署完&#xff0c;想了几套方案&#xff0c;毕竟早点部署完&#xff0c; 就…...

公众号平台有哪些/宁波seo怎么做优化

公众号灏泽异谈文章列表链接使用charles分析公众号请求如图image.png找有用信息完整URL请求地址完整的请求头(headers)信息&#xff0c;Headers里面包括了cookie、User-agent、Host 等信息。因为 requests.get 方法里面的 headers 参数必须是字典对象&#xff0c;所以&#xff…...

网站建设外包还是自己做/域名注册

大数据快速发展&#xff0c;对数据实时性要求不断提高。Flink 作为集流式批量于一体的开源大数据计算引擎&#xff0c;凭着在实时 ETL、实时报表、监控预警、在线系统等方面优势备受企业青睐。阿里、腾讯、字节等较早就已经进行了布局&#xff0c;尤其是字节将它作为流处理唯一…...

腾讯广告代理商/什么优化

2016年1月6日美国联邦贸易委员会&#xff08;FTC&#xff09;发布了一份题为《大数据&#xff1a;包容工具抑或排斥工具》&#xff08;Big Data: A Tool for Inclusion or Exclusion?&#xff09;的研究报告&#xff0c;介绍了大数据的生命周期、大数据技术应用给消费者带来的…...

专题网站搭建/优化大师 win10下载

简单介绍&#xff1a;pip作为非常实用的python包管理工具&#xff0c;不过其默认源下载速度很慢&#xff0c;下载失败也是常见的事&#xff0c;所以得将源切换成国内常用源很有必要国内常用源&#xff1a;清华大学&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple/阿里云…...

域名建议网站/电话投放小网站

由于MySQL的社区版是不支持审计系统的&#xff0c;因此通过第三方的插件实现审计功能。此次采用MariaDB的server_audit插件来实现MySQL的审计功能。 安装server_audit插件 1、下载server_audit插件 下载地址&#xff1a;http://mirrors.neusoft.edu.cn/mariadb//mariadb-5.5.62…...