ElementUI中el-Select 选择器自定义底部固定

​
<el-select
   v-model="form.scanPort"
   placeholder="请选择扫描端口"
   @change="getScanPort"
   popper-append-to-body
   ref="refSelect" 
   @visible-change="VisibleChange"
  >
   <el-option
    v-for="item in scanPortList"
    :key="item.id"
    :label="item.name"
    :value="item.id"
    />
</el-select>

methods:{

VisibleChange() {
      let bkpRef = this.$refs.refSelect;
      let popper = bkpRef.$refs.popper;
      if (popper.$el) popper = popper.$el
      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;
                       background: #0691b1;
                       color: #fff;
                       display: flex;
                       align-items: center;
                       justify-content: center;
                       cursor: pointer;
                       border-top:1px solid rgb(240 242 245)
                 `
        el.innerHTML = `
                  <el-option label="" value="">
                  <div slot @click="customPort"
                  <i class="el-icon-plus"></i> 自定义端口组</div></el-option>`;

        popper.appendChild(el);
        el.onclick = () => {
          this.customPort();
          // 以下代码实现点击后弹层隐藏 不需要可以删掉
          if (bkpRef.toggleDropDownVisible) {
            bkpRef.toggleDropDownVisible(false);
          }
          else {
            bkpRef.visible = false;
          }
        };
      }
    },
}