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

主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 在Element UI中，`el-select`和`el-cascader`是两个常用的组件，用于下拉选择和级联选择。然而，它们默认并未提供在弹出层底部添加自定义操作按钮的功能。本篇文章将深入探讨如何通过自定义方法实现这个功能，以便在使用这些组件时增加更多的交互性。 我们要明白，`el-select`和`el-cascader`的弹出层（即下拉菜单）是通过Vue的`ref`属性和`@visible-change`事件来控制其显示和隐藏的。当弹出层可见时，我们需要在适当的位置插入自定义的操作按钮HTML。 下面是一个简单的例子，展示了如何向`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"/> </li> </ul> ``` 为了在`el-cascader`弹出时动态插入这个按钮，我们需要编写一个方法，如`visibleChange`。该方法会接收三个参数：`visible`（弹出层是否可见）、`refName`（绑定的`ref`名称）以及`onClick`（点击按钮后的回调函数）： ```javascript methods: { 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 = '<li class="el-cascader-node" ...></li>'; // 使用上面的HTML模板 popper.appendChild(el); // 绑定点击事件 el.onclick = () => { onClick && onClick(); // 隐藏弹出层 if (ref.toggleDropDownVisible) { ref.toggleDropDownVisible(false); } else { ref.visible = false; } }; } } }, } ``` 在Vue模板中，我们可以这样使用这个方法： ```html <el-cascader :options="cascaderOptions" v-model="cascaderValue" @visible-change="v => visibleChange(v, 'cascader', cascaderClick)" ref="cascader" /> ``` 这里的`cascaderClick`是自定义的点击事件处理函数，可以根据需要进行实现。 如果需要在多个地方使用这个功能，可以将`visibleChange`方法封装成一个混入（`mixin`），便于复用。例如： ```javascript const selectBottomAction = { methods: { visibleChange, // 其他方法... }, }; ``` 然后在组件中引入这个混入： ```javascript export default { mixins: [selectBottomAction], // ... }; ``` 通过这种方式，我们可以轻松地为Element UI的`el-select`和`el-cascader`组件添加自定义的弹出层底部操作按钮，提升用户体验。这个方法的核心是利用Vue的生命周期和DOM操作来实现动态插入和绑定事件，使得组件功能得以扩展，而无需修改原组件的源码。这不仅遵循了开闭原则，也降低了维护成本。