elementui select组件下拉框底部增加自定义按钮

news2025/1/13 15:57:35

elementui select组件下拉框底部增加自定义按钮

el-select组件的visible-change 事件(下拉框出现/隐藏时触发)

<el-select
    ref="select"
    :value="value"
    placeholder="请选择"
    @visible-change="visibleChange"
  ></el-select>

visibleChange(visible) {
      // 下拉框显示隐藏
      if (visible) {
        const ref = this.$refs.select
        let popper = ref.$refs.popper
        if (popper.$el) popper = popper.$el
        // 判断是否有添加按钮
        if (!Array.from(popper.children).some(v => v.className === 'btn-box')) {
          const el = document.createElement('div')
          el.className = 'btn-box'
          el.innerHTML = `<a class="btn" style="font-size:16px;display:block;line-height:38px;text-align:center;">
                            <i class="el-icon-plus"></i>添加
                          </a>`
          popper.appendChild(el)
          el.onclick = () => {
            // todo
          }
        }
      }
    },

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

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

相关文章

网络工程师知识点7

111、IS-IS路由器的三种类型&#xff1f; Level-1路由器&#xff08;只能创建level-1的LSDB&#xff09; Level-2路由器&#xff08;只能创建level-2的LSDB&#xff09; Level-1-2路由器&#xff08;路由器默认的类型&#xff0c;能同时创建level-1和level-2的LSDB&#xff09;…

如何开发微信小程序

前言 因为最近沉迷和朋友们一起下班去打麻将&#xff0c;他们推荐了一个计分的小程序&#xff0c;就不需要每局都转账或者用扑克牌记录了&#xff0c;但是这个小程序不仅打开有广告&#xff0c;各个页面都植入了广告&#xff0c;用起来十分不适。 于是我就心里暗自下定决心&a…

蓝桥杯每日一题2023.10.18

题目描述 特别数的和 - 蓝桥云课 (lanqiao.cn) 题目分析 简单枚举每一个可行的数 #include<bits/stdc.h> using namespace std; int flag, ans; int main() {int n;cin >> n;for(int i 1; i < n; i ){flag 0;int x i;while(x){int y x % 10;if(y 2 || y…

NewStarCTF2023week3-Rabin‘s RSA

根据题目提示是Rabin算法 先将N分解得到P和Q 导入e&#xff0c;n&#xff0c;p&#xff0c;q&#xff0c;c 使用Rabin算法直接计算明文&#xff0c;再将明文转字符串即可 我们也可以通过脚本来理解原理 import gmpy2 import libnump 13934102561950901579 q 144504527390…

全自动打包机检测不到货物怎么办?

全自动打包机也称无人化打包机或无人化捆扎机&#xff0c;是指在工作的过程中不需要人工干预&#xff0c;机器可以自动检测、自动输送、自动打包的设备。但最近有一些客户反映打包机不能自己检测到货物了。这是为什么呢&#xff1f; 1、电子眼感应太弱。电子眼的感应程度是可以…

棋盘覆盖问题(分治法)

裁判测试程序样例&#xff1a; #include <iostream> #include<fstream> #include <iomanip> #define MAX 1025 using namespace std; int board[MAX][MAX]; int tile1;void ChessBoard(int tr,int tc,int dr,int dc,int size);int main() { int dr,dc,size;…

GeoServer改造Springboot启动三(集成jdbcconfig和jdbcstore)

1、集成jdbc插件 1.1 由于GeoServer所有数据都在数据目录下,如果需要将数据存储数据库,这需要引入如图 13所示的两个插件。 图 13jdbc插件位置 1.2 右键两个插件的“pom.xml”,选择“Add as Maven Project”,模块就会加入maven关联。 图 14jdbc右键“Add as Maven Proje…

python代码调用文件或数据库中保存的脚本

这里采用的读取excel 1、先写一个测试方法 def demo5():import xlrdimport randomwb xlrd.open_workbook("code.xls")st wb.sheet_by_index(0)code st.cell_value(0, 0)list ["6666", asd, 1ad23, 1f23, 12g3, 1b3, 12r3]code2 st.cell_value(0, 1)…

Mendix 创客访谈录|用移动审批和三维可视化打造客户满意的高逻辑应用

本期创客 朱成 能科瑞元数字技术有限公司 Mendix业务部 朱成任职于能科瑞元数字技术有限公司Mendix业务部&#xff0c;主要负责工业互联网软件开发实施。本人主要负责Mendix Teamcenter集成开发、Mendix应用实施部署以及低代码平台技术支持。作为Mendix实施开发工程师参与了中…

iOS 借助定位实现“保活”策略

疑惑 你是否有过类似的体验,当你刚刚来到一个商业区,命名没打开任何APP,手机就会收到push给你推荐周围的“吃喝玩乐”,那他们又是怎么做到的呢? ##解密 其实,我们可以通过监听当位置变化,在用户无感知的情况下在后台悄悄拉齐我们的进行来处理特定的逻辑。 不是感觉很…

智能合同和TikTok:揭示加密技术的前景

在当今数字化时代&#xff0c;智能合同和加密技术都成为了技术和商业世界中的热门话题。它们代表了一个崭新的未来&#xff0c;有着潜在的巨大影响。 然而&#xff0c;你或许从未想过将这两者联系在一起&#xff0c;直到今天。本文将探讨智能合同和TikTok之间的联系&#xff0…

maven构建jar包运行后出现中文乱码问题解决

问题描述&#xff1a; 最近在接手一个坑时&#xff0c;发现本地打出来的jar包&#xff0c;到环境中运行之后总是出现中文乱码问题&#xff0c;但又不是全部中文乱码。经过排查发现&#xff0c;只有写在代码里的中文返回到前端之后出现了乱码。再通过解压打出来的jar包&#xff…

使用目标之间的先验关系提升目标检测器性能

今天跟大家分享阿姆斯特丹大学等提出的用于提升目标检测和实例分割性能的新方法RP-FEM&#xff0c;该方法将目标之间位置的先验关系融入到feature中。 论文标题&#xff1a;Relational Prior Knowledge Graphs for Detection and Instance Segmentation机构&#xff1a;阿姆斯特…

统计学习方法 EM 算法

文章目录 统计学习方法 EM 算法引入EM 算法EM 算法的导出EM 算法的收敛性三硬币模型 统计学习方法 EM 算法 学习李航《统计学习方法》时关于 EM 算法的笔记 引入 概率模型中有时候同时包含观测变量&#xff08;observable variable&#xff09;和隐变量&#xff08;潜在变量…

Spring Boot项目中使用 TrueLicense 生成和验证License(附源码)

1、Linux 在客户linux上新建layman目录&#xff0c;导入license.sh文件&#xff0c; [rootlocalhost layman]# mkdir -p /laymanlicense.sh文件内容&#xff1a; #!/bin/bash # 1.获取要监控的本地服务器IP地址 IPifconfig | grep inet | grep -vE inet6|127.0.0.1 | awk {p…

人脸写真FaceChain的简单部署记录(一)

由【让你拥有专属且万能的AI摄影师AI修图师——FaceChain迎来最大版本更新】这篇文章开始出发进行人脸写真的尝试&#xff0c;笔者之前modelscope申请过免费额度&#xff0c;这里有适配的GPU环境可以提供测试。 但是很难抢到GPU资源&#xff0c;需要等待很久&#xff0c;可能才…

路由侠内网穿透:轻松访问公司内部OA、ERP等系统,提高工作效率

前言: 本文介绍如何通过路由侠内网穿透&#xff0c;从外部网络环境&#xff08;比如异地和家中网络&#xff09;访问公司内网的 OA、ERP 等系统。 公司内网的 OA、ERP 以及其他类型的办公系统&#xff0c; 通常有两种形态&#xff0c;一种是网站形态&#xff0c;一种是单独的应…

开源IT资产管理系统Snipe-IT

本文完成于 8 月初&#xff0c;正好网友 chenlit 在找用于管理固定资产容器和套件&#xff0c;不知道 Snipe-IT 是否能满足他的需求&#xff1b; 什么是 Snipe-IT &#xff1f; Snipe-IT 是一个用 PHP 编写的免费开源 IT 资产管理系统。Snipe-IT 专为 IT 资产管理而设计&#x…

Spring后置处理器之AutowiredAnnotationBeanPostProcessor

抽象类InstantiationAwareBeanPostProcessorAdapter没有实现的接口方法&#xff0c;其子类必须实现。 抽象类InstantiationAwareBeanPostProcessorAdapter可以使得类InstantiationAwareBeanPostProcessorAdapter选择性实现接口部分抽象方法。

新年学新语言Go之二

一、前言 上文 新年学新语言Go之一讲了Go的牛逼之处&#xff0c;给自己找一个学习的理由&#xff0c;但是学任何一门语言基础语法还是要先掌握&#xff0c;虽然这是一件很枯燥的事。 二、环境搭建与HelloWorld 1、配置环境 从https://golang.google.cn/dl/下载Mac环境Go最新…