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

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

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

javascript 复制代码
<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
          }
        }
      }
    },
相关推荐
無限進步D16 分钟前
Java Web 前端 简介
java·开发语言·前端·css·html·css3·web
码士集团小青21 分钟前
从落地到“半停用“:qiankun 微前端在一个 Vue 3 + Vite 项目中的完整实践与反思
前端
the局外人1 小时前
掌控自己的 K 线数据:TradingView 本地部署与数据源接入
前端·vue.js·websocket
deli0071 小时前
配色对比度检查器:一眼看清文字和背景谁看不清
前端
梦诺1 小时前
vue3 keepAlive+记录滚动条
前端·javascript·vue.js
葡萄城技术团队1 小时前
SpreadJS V19.2 新特性揭秘:甘特表的进度线
前端
计算机魔术师2 小时前
黄仁勋台上接特朗普电话开免提,全场听到一句话:AI 不会减速
前端
yivifu2 小时前
HTML元素的textContent和innerText两个属性的差别
前端·html
天若有情6732 小时前
开源轻量双语工具|一键批量查询 NPM 包历史下载量,支持按作者批量统计
javascript·npm·github pages·开源工具·netlify·前端开源·npm克隆量
咸鱼老弟3 小时前
Speculative Decoding(投机采样):大模型"先猜后验",生成速度翻倍
前端·算法·ai编程