如何为element-ui的Select和Cascader添加弹层底部操作按钮

温柔的猫1199

如下图这样把操作按钮放在

1. select

复制代码

弹层底部是一种挺常见的设计方式

但是很遗憾

1. element-ui

复制代码

没有给我们提供这个插槽，我们想实现这个功能只能重写组件或者等官方更新吗，答案当然是否定的！
花了一点时间通过一个函数实现这个功能，支持

1. el-select

复制代码

和

1. el-cascader

复制代码

, 效果点击预览

其实逻辑很简单，把下面这段

1. html

复制代码

插入到指定位置就行了

1. <ul class="el-cascader-menu__list" style="border-top: solid 1px #E4E7ED;padding:0">
   
2.   <li class="el-cascader-node" style="height:38px;line-height: 38px">
   
3.     <i class="el-icon-plus"></i>
   
4.     <span class="el-cascader-node__label">新增商品分类</span>
   
5.     <i class="el-icon-arrow-right el-cascader-node__postfix"/>
   
6.   </li>
   
7. </ul>

复制代码

我这里直接使用

1. el-cascader

复制代码

的样式，实际使用中这段

1. html

复制代码

可以根据自己的需求修改
上代码，在

1. methods

复制代码

写入这段函数

1. /**
   
2. * 为element-ui的Select和Cascader添加弹层底部操作按钮
   
3. * @param visible
   
4. * @param refName  设定的ref名称
   
5. * @param onClick  底部操作按钮点击监听
   
6. */
   
7. visibleChange(visible, refName, onClick) {
   
8.   if (visible) {
   
9.     const ref = this.$refs[refName];
   
10.     let popper = ref.$refs.popper;
    
11.     if (popper.$el) popper = popper.$el;
    
12.     if (!Array.from(popper.children).some(v => v.className === 'el-cascader-menu__list')) {
    
13.       const el = document.createElement('ul');
    
14.       el.className = 'el-cascader-menu__list';
    
15.       el.style = 'border-top: solid 1px #E4E7ED; padding:0; color: #606266;';
    
16.       el.innerHTML = `<li class="el-cascader-node" style="height:38px;line-height: 38px">
    
17. <i class="el-icon-menu"></i>
    
18. <span class="el-cascader-node__label">商品分类管理</span>
    
19. <i class="el-icon-arrow-right el-cascader-node__postfix"/>
    
20. </li>`;
    
21.       popper.appendChild(el);
    
22.       el.onclick = () => {
    
23.         // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
    
24.         onClick && onClick();
    
25. 
    
26.         // 以下代码实现点击后弹层隐藏 不需要可以删掉
    
27.         if (ref.toggleDropDownVisible) {
    
28.           ref.toggleDropDownVisible(false);
    
29.         } else {
    
30.           ref.visible = false;
    
31.         }
    
32.       };
    
33.     }
    
34.   }
    
35. },

复制代码

1. el-select

复制代码

跟

1. el-cascader

复制代码

的调用方式一致，这里以

1. el-cascader

复制代码

举例

1. <el-cascader
   
2.     :options="cascaderOptions"
   
3.     v-model="cascaderValue"
   
4.     @visible-change="v => visibleChange(v, 'cascader', cascaderClick)"
   
5.     ref="cascader"
   
6. />

复制代码

提示：后期可能会随着官方版本升级失效，谨慎使用
总结
以上所述是小编给大家介绍的为element-ui的Select和Cascader添加弹层底部操作按钮，希望对大家有帮助！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

小戴快跑！

666666666666

双子前尘

同意！

赖丶总

牛逼

q543591912

我不确定这个信息的准确性，请再确认一下

从心出发

6666666666

通天塔阿阿

嘎嘎嘎嘎嘎嘎嘎

叭叭的土鼠

666666666666666666

超神攻略

已测试，非常不错

Wlmil

牛逼