vue3为element的select组件添加底部固定操作列

最近公司老系统准备用vue3重构,其中涉及到选择器新增选项,本来以为就是在选择器旁边加一个新增按钮,心想就不是小case嘛?就开始身体一瘫,开始划水,安心等待UI小姐姐的整体布局。后来实在无聊了打开小姐姐的设计图

???这是啥???怎么好像大概可能跟我想的不一样啊。揉了揉眼睛再三确认了一下,发现事情果然没有自己想象的那么简单,算了,好男人怎么能辜负小姐姐的一片苦心。埋头就是干呗。

• 首先想到的就是去看看element官方有没有提供相应的插槽,乘兴而去然后败兴而归,果然element没有让我失望,没有提供。
• 想着获取当前下拉框的dom节点，在底部新增一个节点,在揪掉了我为数不多的几根头发后觉得此法可行,说干就干,行不行试过才知道。

1. 首先输出<el-select></el-select>组件的ref看看能不能获取到下拉框的dom元素，突然发现element还是很人性化的，找到了一个popperPaneRef，刚好满足自己的要求

   

    

   2.写底部固定操作列的样式

      const el = document.createElement('div');
      el.className = 'bkp_add_fixed_bottom_select';
      el.style=`
            font-size: 14px;
            font-weight: 500;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding-top:4px;
            border-top:1px solid rgb(240 242 245)
      `
      el.innerHTML = `
            <span style="margin-right:8px">
                    <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-plus"></use>
                    </svg>
            </span>
            <span>新增</span>
      `;

3.在下拉框展开时添加新增的dom节点

const VisibleChange=(visible)=>{
        if(visible){
                //#region 添加底部操作按钮
                let bkpRef=refSelect.value;
                let popper = bkpRef.popperPaneRef;
                if (!Array.from(popper.children).some(v => v.className === 'bkp_add_fixed_bottom_select')) {
                    ...步骤2相关代码
                    popper.appendChild(el);
                    el.onclick = () => {
                        // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
                        onClickAdd()
                
                        // 以下代码实现点击后弹层隐藏 不需要可以删掉
                        if (tbRef.toggleDropDownVisible) {
                            tbRef.toggleDropDownVisible(false);
                        } 
                        else {
                            tbRef.visible = false;
                        }
                    };
                }
                //#endregion
        }
    }

结尾(附上完整代码)

<template>
    <el-select 
        ref="refSelect"
        placeholder="请选择..."
        @visible-change="VisibleChange"
        :popper-append-to-body="true"
    >
      <el-option
        v-for="item in state.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
</template>

<script setup>
    import { reactive, ref } from "vue-demi";

    const refSelect=ref(null);

    const state=reactive({
        options:[
          {
            value: 'Option1',
            label: 'Option1',
          },
        ]
    })

    //在下拉框展开时添加底部固定项(注意该方法可能随版本更新而不适用)
    const VisibleChange=(visible)=>{
        if(visible){
                //#region 添加底部操作按钮
                let bkpRef=refSelect.value;
                let popper = bkpRef.popperPaneRef;
                if (!Array.from(popper.children).some(v => v.className === 'bkp_add_fixed_bottom_select')) {
                    const el = document.createElement('div');
                    el.className = 'bkp_add_fixed_bottom_select';
                    el.style=`
                          font-size: 14px;
                          font-weight: 500;
                          height: 42px;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          cursor: pointer;
                          padding-top:4px;
                          border-top:1px solid rgb(240 242 245)
                    `
                    el.innerHTML = `
                          <span style="margin-right:8px">
                                  <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-plus"></use>
                                  </svg>
                           </span>
                          <span>新增</span>
                      `;
                    popper.appendChild(el);
                    el.onclick = () => {
                        // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
                        // onClickAdd();
                
                        // 以下代码实现点击后弹层隐藏 不需要可以删掉
                        if (bkpRef.toggleDropDownVisible) {
                            bkpRef.toggleDropDownVisible(false);
                        } 
                        else {
                            bkpRef.visible = false;
                        }
                    };
                }
                //#endregion
            
        }
    }

</script>

<style lang="scss" scoped>
</style>