Putting the operation button on the bottom of the select bullet layer is a very common design method.
But unfortunately element-ui did not provide us with this slot. If we want to implement this function, can only rewrite the components or wait for official updates? The answer is of course no!
I spent a little time implementing this function through a function, supporting el-select and el-cascader , click preview of the effect
In fact, the logic is very simple. Just insert the following html into the specified location.
<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>New product classification</span> <i class=el-icon-arrow-right el-cascader-node__postfix/> </li></ul>
I directly use the el-cascader style here. In actual use, this html can be modified according to my own needs
On the code, write this function in methods
/** * Add the bottom operation button of the element-ui Select and Cascader* @param visible * @param refName Set refName * @param onClick The bottom operation button click to listen */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 style=height:38px;line-height: 38px><i class=el-icon-menu></i><span class=el-cascader-node__label>Product classification management</span><i class=el-icon-arrow-right el-cascader-node__postfix/></li>`; popper.appendChild(el); el.onclick = () => { // The logic that you want to trigger after clicking the click event of the bottom button can also be written directly onClick && onClick(); // The following code implements the bullet layer hidden after clicking and does not need to be deleted if (ref.toggleDropDownVisible) { ref.toggleDropDownVisible(false); } else { ref.visible = false; } } }; } }}, The call method of el-select is the same as el-cascader . Here, el-cascader is used as an example.
<el-cascader :options=cascaderOptions v-model=cascaderValue @visible-change=v => visibleChange(v, 'cascader', cascaderClick) ref=cascader/>Tip: The official version may fail later as the upgrade is updated, so please use it with caution Summarize
The above is what the editor introduced to you to add the bottom operation buttons at the bottom of the element-ui Select and Cascade. I hope it will be helpful to everyone!