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>
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
}
},
};
遍历循环
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)