如下图所示，将操作按钮放置在select层底部是一种很常见的设计方式，可惜element-ui并没有给我们提供这个槽位。要想实现这个功能，只能重写组件或者等待官方更新。答案当然是否定的！花了点时间通过一个函数实现了这个功能，支持el-select和el-cascader，点击预览效果，逻辑其实很简单，就是在指定位置插入下面的html添加产品类别我这里直接使用了el-cascader的样式。在实际使用中，这个html可以根据自己的需要进行修改。把这个函数写在methods/***forelement-ui的Select和Cascader添加弹出层底部操作按钮*@paramvisible*@paramrefNamesetrefname*@paramonClick底部操作按钮点击监听*/visibleChange(visible,refName,onClick){if(visible){constref=this.$refs[refName];让popper=ref.$refs.popper;如果(popper.$el)popper=popper.$el;if(!Array.from(popper.children).some(v=>v.className==='el-cascader-menu__list')){constel=document.createElement('ul');el.className='el-cascader-menu__list';el.style='border-top:solid1px#E4E7ED;填充：0；颜色：#606266;';el.innerHTML=`商品分类管理`;popper.appendChild(el);el.onclick=()=>{//你想在点击底部按钮的点击事件后触发的逻辑也可以直接写在这里onClick&&onClick();//以下代码点击后不需要隐藏弹出层可以删除if(ref.toggleDropDownVisible){ref.toggleDropDownVisible(false);}else{ref.visible=false;}};}}}，el-select的调用方式与el-cascader相同。示例visibleChange(v,'cascader',cascaderClick)"ref="cascader"/>如果调用的地方比较多，也可以像我一样打包成mixin。更新于2020/05/12。缓存参数，支持动态变化。constselectBottomAction={methods:{/***在element-ui的Select和Cascader的弹出层底部添加一个action按钮*@visible-change="v=>selectBottomAction(v,{ref:'select',label:'产品分类',icon:'el-icon-menu',click:goodsTypeManagement})"*@paramvisible*@paramrefsetrefname*@paramclick底部操作按钮点击监听*@paramlabeltitle*@paramiconiconclass*@paramarrow是否显示箭头*/selectBottomAction(visible,{ref,click,label='',icon='',arrow=false}){if(visible){const_ref=this.$refs[ref];让popper=_ref.$refs.popper;如果(popper.$el)popper=popper.$el;让el=Array.from(popper.children).find(v=>v.className==='el-cascader-menu__list');if(!el){el=document.createElement('ul');el.className='el-cascader-menu__list';el.style='边框-顶部：实心1px#E4E7ED；填充：0；颜色：#606266;';el.onclick=()=>{点击&&点击();如果（_ref.toggleDropDownVisible）{_ref.toggleDropDownVisible（假）；}else{_ref.visible=false;}};popper.appendChild(el);}if(el._label!==label||el._icon!==icon||el._arrow!==arrow){el.innerHTML=`${icon?``:''}${label}${arrow?'':''}`;}el._label=标签；el._icon=图标；el._arrow=箭头；}},},};导出默认的selectBottomAction;提示：后期正式版升级可能会失效，谨慎使用
