ant design vue select 增加和刪除option選項

最近接觸了一個select選擇框，對option進行添加選項和刪除選項，效果圖入下：

主要整合功能點：

1.點擊添加，新增一個option選項，使用 dropdownRender 對下拉菜單進行自由擴展

        

1.點擊刪除按鈕，刪除一個一個option選項，這個簡單，但是點擊其中一個選項會把刪除圖標一起帶上去，不是我們的意願，使用 optionLabelProp 指定回填到選擇框的 Option 屬性。

  

廢話不多說，上代碼主要兩個功能設置：option-label-prop="label"和 slot="dropdownRender"，很簡單，別看代碼很多。

<template>
  <div >
        <a-select v-model="group" placeholder="請選擇分組"  option-label-prop="label">
          <div slot="dropdownRender" slot-scope="menu">
            <v-nodes :vnodes="menu" />
            <a-divider style="margin: 4px 0;" />
            <div style="padding: 4px 8px; cursor: pointer;" @mousedown="e => e.preventDefault()" @click="addItemShow">
              <a-icon type="plus" /> Add item
            </div>
          </div>
          <a-select-option class="delete-icon" :value="item" v-for="item in groupList" :key="item" :label="item">
              {{item}}
              <a-icon style="position: absolute;top:30%;right: 10%;" type="delete" @click.stop="deleteItem(item)" />
          </a-select-option>
        </a-select>
  </div>
</template>

<script>
export default {
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  data () {
    return {
      groupList: ['未分組', '分組1', '分組2'],
      group: '未分組',
    }
  },

  methods: {
    /**
       * 刪除分組選項
       */
    deleteItem (label) {
      const index = this.groupList.indexOf(label)
      this.groupList.splice(index, 1)
    },
    /**
       * 打開分組彈窗
       */
    addItemShow () {
      this.visible = true
    },
    /**
       * 關閉分組彈窗
       */
    handleCancel () {
      this.visible = false
    },
    /**
       * 添加分組選項
       */
    handleOk () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (!this.groupList.includes(this.form.name)) {
            this.groupList.push(this.form.name)
            this.$message.success('創建分組成功')
            this.handleCancel()
          } else {
            this.$message.error('存在相同分組名')
          }
        } else {
          return false
        }
      })
    },
  },
}

</script>
<style lang="less">
</style>