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
          }
        }
      }
    },
相关推荐
悟能不能悟1 分钟前
前端如何重定向
前端
GIS遥遥5 分钟前
如何用 Cesium 实现楼栋单体化?前端 WebGIS 实战教程
前端·javascript·cesium·三维gis开发
三小河16 分钟前
React 插槽(Slot)完全指南:从基础到实战的灵活组件通信方案
前端·javascript·面试
布茹 ei ai20 分钟前
1、基于 GEE 的 NDVI 交互式时序可视化与趋势分析工具
javascript·gee·遥感图像处理·谷歌云平台
```???23 分钟前
666666999999
javascript·tcp/ip·node.js
ghfdgbg25 分钟前
12. AOP(记录日志)
前端
我命由我1234526 分钟前
微信小程序 - 页面返回并传递数据(使用事件通道、操作页面栈)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
一水鉴天26 分钟前
整体设计 定稿 备忘录仪表盘方案 之1 初稿之8 V5版本的主程序 之2: 自动化导航 + 定制化服务 + 个性化智能体(豆包助手)
前端·人工智能·架构
vortex538 分钟前
【Web开发】从WSGI到Servlet再到Spring Boot
前端·spring boot·servlet
于谦41 分钟前
git提交信息也能自动格式化了?committier快速体验
前端·javascript·代码规范