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
          }
        }
      }
    },
相关推荐
她是太阳,好耀眼i8 分钟前
Nvm 实现vue版本切换
javascript·vue.js·ecmascript
蒲公英100115 分钟前
在wps软件的word中使用js宏命令设置表格背景色
javascript·word·wps
倚栏听风雨15 分钟前
npm命令详解
前端
用户479492835691526 分钟前
为什么我的react项目启动后,dom上的类名里没有代码位置信息
前端·react.js
键盘飞行员33 分钟前
Vue3+TypeScript项目中配置自动导入功能,遇到了问题需要详细的配置教程!
前端·typescript·vue
han_34 分钟前
前端高频面试题之Vue(初、中级篇)
前端·vue.js·面试
一枚前端小能手1 小时前
📜 `<script>`脚本元素 - 从加载策略到安全性与性能的完整指南
前端·javascript
掘金安东尼1 小时前
TypeScript为何在AI时代登顶:Anders Hejlsberg 的十二年演化论
前端·javascript·面试
yong99901 小时前
MATLAB倍频转换效率分析与最佳匹配角模拟
开发语言·前端·matlab
面向星辰1 小时前
扣子开始节点和结束节点
java·服务器·前端