form表单一个给后台的值对应前端很多下拉选择框

自己封装一个组件

<template>
  <div class="">
    <basic-select
      v-for="(item,index) in selectRuleIdArray"
      :key="index"
      v-model="selectRuleIdArray[index]"
      allow-create
      filterable
      default-first-option
      :options="options"
      placeholder="请选择"
      @change="selectChange"
    />
  </div>
</template>

<script lang='ts'>
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import BasicSelect, { Option } from '@/components/form/BasicSelect.vue';

@Component({
  components: {
    BasicSelect
  }
})
export default class MultiSelect extends Vue {
    @Prop(Array)
    private options !: Option[]; // 传来的选项。

    @Prop(String)
    private value !: ''; // 选择的字符串

    private count = 4; // 初始化4
    private selectRuleIdArray: string[]=[]; // 匹配规则

    private get bindSelectValue (): string[] {
      return this.value ? this.value.split(',') : [];
    }

    private mounted () {
      this.selectRuleIdArray = this.bindSelectValue.length ? this.bindSelectValue : new Array(this.count).fill(null).map((_, i) => {
        return '';
      });
    }

    public addSelect () {
      if (this.selectRuleIdArray.length >= this.options.length) {
        return false;
      }
      this.$set(this.selectRuleIdArray, this.selectRuleIdArray.length, '');
    }

    public subSelect () {
      if (this.selectRuleIdArray.length <= 1) {
        return false;
      }
      this.$delete(this.selectRuleIdArray, this.selectRuleIdArray.length - 1);
    }

    private selectChange (val: string) {
      this.$emit('update:value', this.selectRuleIdArray.filter(x => x).join(','));
    }
}
</script>

<style lang='scss' scoped>

</style>

<el-form-item
   label="全部数据ID："
   prop="image_id_field"
 >
   <multi-select
     ref="imageIdFieldMulti"
     :options="matchOptions"
     :value.sync="formModel.image_id_field"
   />
 </el-form-item>