vue-antd 循环遍历验证表单_antd遍历表单的rulevalidate

vue-antd 循环遍历验证表单

 <a-card>
        <div v-for="(item, i) in addForm" :key="i">
          <a-form-model :ref="getRef(i)" :model="addForm[i]" :rules="rules" >
              <a-form-model-item label="Activity zone" prop="region">
                <a-select @change="(val) => change_1(val,i)" placeholder="选择">
                  <a-select-option value="shanghai"> Zone one </a-select-option>
                  <a-select-option value="beijing"> Zone two </a-select-option>
                </a-select>
              </a-form-model-item>
          </a-form-model>
        </div>
      <a-button type="primary" @click="onSubmit"> 确认 </a-button>
      <a-button style="margin-left: 10px" @click="resetForm"> 取消 </a-button>
 </a-card>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

export default {
  data() {
    return {
      rules:{
          region: [
          { required: true, message: 'Please select Activity zone', trigger: 'change' }
        ]
      },
      addForm: [
            { region:'' },
            { region:'' },
      ]
    };
  },
  methods: {
    onSubmit() {
      var that = this;
      let length = this.addForm.length
      for (let index = 0; index < length; index++) {
        let taget = `formref_${index}`
        this.$refs[taget][0].validate(valid => {
          if (valid) {
            console.log(that.addForm[index].region);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    change_1(val,i) {
      this.addForm[i].region = val
    },
    getRef(i) {
      return 'formref_' + i 
    }
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

遍历循环

let list =[
    {
        time:'Tue Nov 17 2020 09:52:28 GMT+0800',
        date:'Tue Nov 17 2020 09:52:28 GMT+0800',
        hr:132,
        checked:'1',
        sectors:'13',
        status:'1',
        type:'55'
    },
    {
        time:'Tue Nov 17 2020 10:52:28 GMT+0800',
        date:'Tue Nov 17 2020 09:52:28 GMT+0800',
        hr:89,
        checked:'0',
        sectors:'22',
        status:'2',
        type:'45'
    }
]


console.log([list.time])

/**
 * 时间格式化  2020-11-09
 * @param {*} timeData 
 */
function timeFormat(timeData){
    let date = new Date(timeData)
    let h =  date.getHours()
    let m =  date.getMinutes()
    let s =  date.getSeconds()
    const  time = h + ':' + m 
    return time
  }


  /**
 * 日期格式化  2020-11-09
 * @param {*} timeData 
 */
  function dateFormat(dateData){
    var date = new Date(dateData)
    var y = date.getFullYear()
    var m = date.getMonth() + 1
    m = m < 10 ? ('0' + m) : m
    var d = date.getDate()
    d = d < 10 ? ('0' + d) : d
    const time = y + '-' + m + '-' + d
    return time
  }
  

let addlist = list.map(item=>{
    item.time = timeFormat(item.time)
    item.time = dateFormat(item.date)
    return  {
        mtime:item.time + ' ' + item.time,
        hr:item.hr,
        interviewTime:null,
        invite_result:item.checked,
        sectors:item.sectors,
        status: item.status,
        type: item.type
    }
})


console.log(addlist)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71