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
}
}
}
},