Ant Design表单中添加动态属性并使用select组件案列

Ant Design表单中添加动态属性并使用select组件案列
如下图所示，这个表单页中的专业可以添加多条，在专业的第一个字段使用的是select组件，还要保证每条的数据不相互影响

代码如下：

<template>
  <div class="add-mem">
    <div class="form-css">
      <a-form-model :model="form"
                    :rules="rules"
                    ref="ruleForm"
                    :wrapper-col="{ span: 10 }"
                    :label-col="{ span: 5 }">
        <a-form-model-item label="院系名称" prop="departmentName">
          <a-input  v-model="form.departmentName" />
          <!-- class="form_width" -->
        </a-form-model-item>
        <a-form-model-item label="*届别" prop="grade">
          <a-input v-model="form.grade" placeholder="请输入届别，4位年份数字，如2021" />
        </a-form-model-item>
        <a-form-model-item label="专业" >
          <div  class="form_area" v-for="(item, index) in majorArr" :key="index">
            <!--<a-input class="m-width" placeholder="专业名称" v-model="item.majorName"  /> &#45;&#45; -->
            <!-- style="width: 200px"  -->
            <!--  label-in-value -->
            <span class="from-index" v-if="majorArr.length>1">{{index+1}}</span>
            <a-select
                    show-search
                    :value="item.majorName"
                    placeholder="专业名称"
                    class="sp-width"
                    :default-active-first-option="false"
                    :show-arrow="false"
                    :filter-option="false"
                    :not-found-content="null"
                    label-in-value
                    @search="handleSearch"
                    @focus="handleFocus(index)"
                    @blur="onBlurSelect"
                    @change="handleChange"
            >
              <a-select-option v-for="obj in item.majorNameArr" :key="obj.specialtyCode">
                {{ obj.specialtyName }}
              </a-select-option>
            </a-select>
            --
            <a-input class="m-width" placeholder="专业代码"    v-model="item.majorCode" /> --
            --
            <!--<a-input class="m-width" placeholder="学历" @change="handleXueLiChange"   v-model="item.education" /> -->
            <a-select v-model ='item.education' style="width: 90px" >
              <a-select-option v-for="(xuli,index) in xueLiOptions" :key="xuli" >
                {{xuli}}
              </a-select-option>
            </a-select>
            --
            <a-input class="m-width" placeholder="人数"    v-model="item.studentNumber" />

            <template v-if="!isDisabled">
              <a-icon v-if="index === 0" class="create_fq_icon m-left" @click="addField" type="plus-circle" />
              <a-icon v-else class="create_fq_icon m-left" @click="deleteField(index)" type="minus-circle" />
            </template>

          </div>

        </a-form-model-item>
        <a-form-model-item label="联系人">
          <a-input v-model="form.linkMan" />
        </a-form-model-item>
        <a-form-model-item label="联系电话">
          <a-input v-model="form.linkPhone" />
        </a-form-model-item>
        <a-form-model-item label="院系地址">
          <a-input v-model="form.linkPhone" />
        </a-form-model-item>
        <a-form-model-item label="备注：">
          <a-input v-model="form.comment" type="textarea" />
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">
            提交
          </a-button>
          <a-button style="margin-left: 10px;" @click="doCancel">
            取消
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>

let timeout;
let currentValue;
//
import  { doSearchMajorList ,doAddMajorForm} from   '@/http/api.js'
function fetch(value, callback) {
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  currentValue = value;

  function fake() {
    let param = { name : value}
    doSearchMajorList(param).then(res =>{
      console.log("res==112", res)
      if (currentValue === value) {
        const result = res.data.data || [];
        callback(result);
      }
    })
  }

  timeout = setTimeout(fake, 300);
}
import { mapGetters} from 'vuex'
export default {
  name: 'MajorAddPage',
  data() {
    return {
      isDisabled: false,
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      majorArr: [{majorName: undefined, majorCode: null,education:'',studentNumber:'',majorNameArr:[]}],
      majorNameArr: [],
      majorCodeArr: [],
      value: undefined,
      majorCode:undefined,
      selIndex:'',
      form: {
        address: '',
        comment: '',
        departmentName: '',
        education: '',
        grade: '',
        linkMan: '',
        linkPhone: '',
        majorCode: '',
        majorName: undefined,
        schoolCode: '',
        status: false,
        studentNumber: '',
      },
      xueLiOptions:[],
      rules: {
        departmentName: [{required: true, message: '请输入院系名称', trigger: 'blur'},
          {max: 30, message: '最多输入30个字符', trigger: 'blur'},
        ],
        grade: [{required: true, message: '请输入届别', trigger: 'blur'}],
        roles: [{required: true, message: '请输入所属角色', trigger: 'change'}],
      },
    };
  },
  computed:{
    ...mapGetters('login', [
      'userInfo'
    ]),
  },
  created() {
    this.xueLiOptions = this.$store.getters.xueLiOptions
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form);
      console.log('submit!majorArr162== ', this.majorArr);
      let copyMajorArr = JSON.parse(JSON.stringify(this.majorArr));
      if(copyMajorArr && copyMajorArr.length >0){
        copyMajorArr.forEach(item =>{
          item.majorName = item.majorName.label
        })
      }

      let self = this
      self.$refs.ruleForm.validate(valid => {
        if (valid) {
           self.form.schoolCode = self.userInfo.schoolCode
          console.log("提交==",self.form)
          self.form.majorList = copyMajorArr;
          doAddMajorForm(self.form).then(res =>{
            console.log("res===",res)
            if(res.data.code == 0){
              self.$message.success('添加院系专业成功！')
              self.$router.push('/majorSet')
            }
          })
        } else {

        }
      })
    },
    doCancel() {
      this.$router.go(-1);
    },
    addField() {
      if(this.majorArr.length<20){
        this.majorArr.push({majorName: undefined, majorCode: null,education:'',studentNumber:'',majorNameArr:[]})
      }else {
        this.$message.info('最多添加20个专业！')
      }
    },
    deleteField(index) {
      this.majorArr.splice(index, 1)
    },
    handleSearch(value) {
      if (value) {
        this.majorArr[this.selIndex].inputName = value
       // fetch(value, data => (this.majorNameArr = data));
        fetch(value, data => (this.majorArr[this.selIndex].majorNameArr = data));
      }
    },
    handleChange(value) {
      // this.value = value;
     // this.form.majorName = value;
      this.majorArr[this.selIndex].majorName = value
      this.majorArr[this.selIndex].majorCode = value.key
      // fetch(value, data => (this.majorNameArr = data));
    },
    onBlurSelect(value) {
      if (this.majorArr[this.selIndex].majorNameArr.length>0) {
      } else {
        if (this.majorArr[this.selIndex].inputName.length >0){
          this.majorArr[this.selIndex].majorName = {key: "", label: this.majorArr[this.selIndex].inputName }
        }
      }
    },
    handleFocus(val){//传的索引值
      this.selIndex = val
    },
  },

}
</script>

<style scoped lang="less">
.add-mem{
  background-color: #FFFFFF;
  /*width: 1136px;*/
  min-height: 630px;
  padding-top: 30px;
  padding-bottom: 50px;
  .form-css{

    .form_width {
      width: 468px;
      &.field {
        width: 217px;
      }
    }
    .sp-width{
      width: 160px;
    }
    .m-width{
      width: 88px;
    }
    .form_area{
      width: 668px;
      /*border: 1px solid red;*/
      margin-bottom: 10px;
      .m-left{
        margin-left: 16px;
      }
    }
    .create_fq_icon {
      font-size: 18px;
      vertical-align: middle;
      color: #437FFF;
    }
  .from-index{
    display: inline-block;
    margin-right: 10px;
  }
  }
}

</style>