select下拉菜单自由扩展-输入框添加/options删除

背景
antdv select 官方使用dropdownRender对下拉菜单进行自由扩展

效果展示

可添加，删除

代码

<script>
export default {
  props: {
    value:{
      type: String,
      required: false
    },
    disabled:{
      type: Boolean,
      required: false,
      default: false
    },
  },
  components: {
      VNodes: {
          functional: true,
          render: (h, ctx) => ctx.props.vnodes
      }
  },
  data: () => ({ 
    items: ['大学本科', '硕士研究生','博士研究生'], 
    // value: '', 
    open: false, 
    clickHandle: null,
    text: '',
   }),
  methods: {
      /**
       * 删除分组选项
       */
      deleteItem (label) {
        const index = this.items.indexOf(label)
        this.items.splice(index, 1)
      },
      addItem() {
          this.items.push(this.text)
      },
      openSelect() {
          this.open = !this.open
      },
      selectOption(value) {
          // 单选时设置
          this.$emit('change',value)
          this.open = false
      },
      filterOption(input, option) {
          return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
  },
  mounted() {
      this.clickHandle = (e) => {
          if (e.target && 'className' in e.target && this.open) {
              const className = e.target.className;
              if (className.indexOf('select_overlap') === -1) {
                  this.open = false
              }
          } else {
              this.open = false
          }
      }
      document.body.addEventListener('click', this.clickHandle)
  },
  beforeDestroy() {
      if (this.clickHandle) {
          document.body.removeEventListener('click', this.clickHandle)
          this.clickHandle = null
      }
  }
}
script>
 
<style scoped>
.select-wrapper {
    position: relative;
    .select_overlap {
        cursor: pointer;
        height: 32px;
        width: 300px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
    }
}
 
style>