Element Ui 下拉選擇框內追加添加按鈕，點擊可以追加新的選項內容

功能需求，在下拉選項框內，追加一個添加的按鈕，點擊可以添加新的被選項內容；

效果展示如下：

代碼實現封裝組件：

<template>
  <span>
    <el-cascader
      ref="cascader"
      v-model="selectedOptions"
      size="medium"
      style="width:100%"
      :props="defaultParams"
      :options="brands"
      :clearable="true"
      @change="handleChange"
      @visible-change="v => visibleChange(v, 'cascader', categoriesClick, '添加品牌')"
    />
    <!-- 添加品牌 -->
    <add-brand :open-off="openOff" @changeAddclose="closeAdd" />
  </span>
</template>
<script>
import { brandAllList } from '@/api/item/brand.js'
import AddBrand from './components/addbrand.vue'
export default {
  name: 'AboutAddBrand',
  components: {
    AddBrand
  },
  data() {
    return {
      brands: [], // 品牌選項
      selectedOptions: [], // 品牌被選
      defaultParams: { // 轉品牌選項
        label: 'name',
        value: 'brand_id',
        children: 'children'
      },
      openOff: false // 添加品牌信息彈框
    }
  },
  async mounted() {
    await this.getBrand() // 品牌
  },
  methods: {
    /**
     * 獲取品牌選項
     */
    getBrand() {
      this.brands = []
      brandAllList().then((res) => {
        if (res && res.code === 0 && res.data) {
          this.brands = res.data.list
          const selectId = this.findTargetId(this.brands[0])
          this.selectedOptions = selectId
        } else {
          this.$message({
            message: res.msg,
            type: 'danger'
          })
        }
      })
    },
    /**
     * 遞歸設置默認值
     */
    findTargetId(dataobj) {
      if (!dataobj.children) {
        return dataobj.brand_id
      } else {
        if (dataobj.children) {
          for (var i = 0; i < dataobj.children.length; i++) {
            var flagId = this.findTargetId(dataobj.children[i])
            if (flagId) {
              return flagId
            }
          }
        }
      }
      return false
    },
    // 商品品牌選中改變設置
    handleChange(value) {
      // console.log(value)
      this.$refs.cascader.dropDownVisible = false
      this.$emit('handleChange', value)
    },
    /**
     * 爲element-ui的Select和Cascader添加彈層底部操作按鈕
     * @param visible
     * @param refName  設定的ref名稱
     * @param onClick  底部操作按鈕點擊監聽
     * @param addname  底部按鈕名稱
     */
    visibleChange(visible, refName, onClick, addname) {
      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 text-center" style="height:50px;line-height: 50px">
                <span class="el-cascader-node__label"><i class="font-blue el-icon-plus"></i>` + addname + `</span>
                </li>`
          popper.appendChild(el)
          el.onclick = () => {
          // 底部按鈕的點擊事件 點擊後想觸發的邏輯也可以直接寫在這
            onClick && onClick()

            // 以下代碼實現點擊後彈層隱藏 不需要可以刪掉
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false)
            } else {
              ref.visible = false
            }
          }
        }
      }
    },
    /**
     * 點擊添加品牌
     */
    categoriesClick() {
      this.openOff = true
    },
    /**
     * 添加品牌
     */
    handleAddClick() {
      this.closeAdd(true)
    },
    /** 關閉 */
    closeAdd(status) {
      this.openOff = status
      this.getBrand()
    }
  }
}
</script>

使用組件：

<el-form-item label="商品品牌">
    <about-add-brand ref="brandInfo" @handleChange="handleBrandChanges" />
</el-form-item>
<script>
// ... 其他內容略過
import AboutAddBrand from './components/add/brandadd.vue'
  components: {
    AboutAddBrand,
  },
   data(){
        return {
            itemForm:{
                brand_id:''
            }
        }
    },
    // 商品品牌選中改變設置
    handleBrandChanges(value) {
      // eslint-disable-next-line eqeqeq
      this.itemForm.brand_id = value[0]
    },
</script>

注：添加品牌是彈框表單添加的內容；