您现在的位置是：网站首页> 编程资料编程资料

如何为element-ui的Select和Cascader添加弹层底部操作按钮如何为 Element UI 里的 autosize textarea 设置高度

2021-08-29 1347人已围观

简介这篇文章主要介绍了如何为element-ui的Select和Cascader添加弹层底部操作按钮,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

如下图这样把操作按钮放在 select 弹层底部是一种挺常见的设计方式

但是很遗憾 element-ui 没有给我们提供这个插槽，我们想实现这个功能只能重写组件或者等官方更新吗，答案当然是否定的！

花了一点时间通过一个函数实现这个功能，支持 el-select 和 el-cascader , 效果点击预览

其实逻辑很简单，把下面这段 html 插入到指定位置就行了

新增商品分类

 /** * 为element-ui的Select和Cascader添加弹层底部操作按钮 * @param visible * @param refName 设定的ref名称 * @param onClick 底部操作按钮点击监听 */ visibleChange(visible, refName, onClick) { if (visible) { const ref = this.$refs[refName]; let popper = ref.$refs.popper; if (popper.$el) popper = popper.$el; if (!Array.from(popper.children).some(v => v.className === 'el-cascader-menu__list')) { const el = document.createElement('ul'); el.className = 'el-cascader-menu__list'; el.style = 'border-top: solid 1px #E4E7ED; padding:0; color: #606266;'; el.innerHTML = `商品分类管理
`; popper.appendChild(el); el.onclick = () => { // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这 onClick && onClick(); // 以下代码实现点击后弹层隐藏 不需要可以删掉 if (ref.toggleDropDownVisible) { ref.toggleDropDownVisible(false); } else { ref.visible = false; } }; } } },

您现在的位置是：网站首页> 编程资料编程资料

如何为element-ui的Select和Cascader添加弹层底部操作按钮如何为 Element UI 里的 autosize textarea 设置高度

相关内容

点击排行

本栏推荐

猜你喜欢