<template>
  <el-select v-model="innerValue" multiple placeholder="请选择" filterable clearable :allow-create="allowAdd">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<!-- v-model上床绑定逗号分隔的字符串，可以props配置是否允许新增 -->
<script>
  export default {
    name: 'MutiSelect',
    props: {
      value: {
        type: String,
        default: ''
      },
      options: {
        type: Array,
        default: () => []
      },
      allowAdd: {
        type: Boolean,
        default: false
      }
    },
    // 计算属性捕获实现双向绑定
    computed: {
      innerValue: {
        get() {
          if (!this.value) {
            return [];
          }
          return this.value.split(',');
        },
        set(val) {
          this.$emit('input', val.join(','));
        }
      }
    }
  }
</script>