How to add a pop-up bottom action button for element-ui's Select and Cascader

As shown in the figure below, it is a common design method to place the operation button at the bottom of select pop-up layer

But unfortunately, element-ui does not provide us with this slot. If we want to implement this function, can we only rewrite the component or wait for official updates? The answer is of course no!

It took a while to implement this function through a function, supporting el-select and el-cascader , click to preview the effect

In fact, the logic is very simple. Just insert the following html into the specified position.

<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">Add new product categories</span>
    <i class="el-icon-arrow-right el-cascader-node__postfix"/>
  </li>
</ul>

I use the el-cascader style directly here. In actual use, this html can be modified according to your needs.

Above is the code, write this function in methods

/**
 * Add a pop-up bottom operation button for element-ui's Select and Cascader * @param visible
 * @param refName set ref name * @param onClick bottom operation button click listener */
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 you want to trigger after clicking the bottom button can also be written directly here onClick && onClick();

        // The following code implements the pop-up layer hiding after clicking. It is not necessary and can be deleted if (ref.toggleDropDownVisible) {
          ref.toggleDropDownVisible(false);
        } else {
          ref.visible = false;
        }
      };
    }
  }
},

The calling method of el-select is the same as that of el-cascader . Here we take el-cascader as an example

<el-cascader
    :options="cascaderOptions"
    v-model="cascaderValue"
    @visible-change="v => visibleChange(v, 'cascader', cascaderClick)"
    ref="cascader"
/>

Tip: It may become invalid with the official version upgrade later, so use with caution

Summarize

The above is what I introduced to you about adding pop-up bottom operation buttons for element-ui's Select and Cascader. I hope it will be helpful to you!

<<: How to achieve the maximum number of connections in mysql

>>: Detailed explanation of where Docker saves log files