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

女爷i 2022-12-21 10:51 14阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center]

代码如下：

<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" />
              
            </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">
                
                
                
                <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-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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4964d13fd3234529b04ab7b55f397187.png