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
          }
        }
      }
    },
相关推荐
前端百草阁18 分钟前
JavaScript 模块系统:CJS/AMD/UMD/ESM
javascript·ecmascript
打小就很皮...19 分钟前
简单实现Ajax基础应用
前端·javascript·ajax
wanhengidc1 小时前
服务器租用:高防CDN和加速CDN的区别
运维·服务器·前端
哆啦刘小洋2 小时前
HTML Day04
前端·html
再学一点就睡2 小时前
JSON Schema:禁锢的枷锁还是突破的阶梯?
前端·json
保持学习ing3 小时前
帝可得 - 设备管理
javascript·vue.js·elementui
从零开始学习人工智能4 小时前
FastMCP:构建 MCP 服务器和客户端的高效 Python 框架
服务器·前端·网络
烛阴4 小时前
自动化测试、前后端mock数据量产利器:Chance.js深度教程
前端·javascript·后端
好好学习O(∩_∩)O4 小时前
QT6引入QMediaPlaylist类
前端·c++·ffmpeg·前端框架
敲代码的小吉米4 小时前
前端HTML contenteditable 属性使用指南
前端·html