详解为详解为element-ui的的Select和和Cascader添加弹层底部操作按钮添加弹层底部操作按钮
主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮,文中通过示例代码介绍的非常详细,
对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
如下图这样把操作按钮放在select弹层底部是一种挺常见的设计方式
但是很遗憾element-ui没有给我们提供这个插槽,我们想实现这个功能只能重写组件或者等官方更新吗,答案当然是否定的!
花了一点时间通过一个函数实现这个功能,支持el-select和el-cascader,效果点击预览
其实逻辑很简单,把下面这段html插入到指定位置就行了
<ul class="el-cascader-menu__list" style="border-top: solid 1px #E4E7ED;padding:0">
<li class="el-cascader-node" style="height:38px;line-height: 38px">
<i class="el-icon-plus"></i>
<span class="el-cascader-node__label">新增商品分类</span>
<i class="el-icon-arrow-right el-cascader-node__postfix"/>
评论0