Element Ui 下拉选择框内追加添加按钮，点击可以追加新的选项内容_elementui下拉按钮

功能需求，在下拉选项框内，追加一个添加的按钮，点击可以添加新的被选项内容；

效果展示如下：

代码实现封装组件：

<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>

注：添加品牌是弹框表单添加的内容；