使用el-table加el-form进行表单校验
html
<template>
<div class="table-form">
{{ tableFormData }}
<div style="margin-right: 0;">
<el-button type="primary" @click="add">新增</el-button>
</div>
<el-form :model="tableFormData" ref="ruleForm" label-width="0px">
<el-table
:data="tableFormData.tableData"
border
style="width: 100%">
<el-table-column label="日期">
<template slot-scope="scope">
<el-form-item label="" :prop="`tableData[${scope.$index}].date`" :rules="rules.date">
<el-date-picker
v-model="scope.row.date"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="姓名">
<template slot-scope="scope">
<el-form-item label="" :prop="`tableData[${scope.$index}].name`" :rules="rules.name">
<el-input type="input" v-model="scope.row.name"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="地址">
<template slot-scope="scope">
<el-form-item label="" :prop="`tableData[${scope.$index}].address`" :rules="rules.address">
<el-input type="textarea" v-model="scope.row.address"/>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<div>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</div>
</div>
</template>
js
<script>
export default {
name: 'DemoPage',
components: {},
data () {
return {
tableFormData: {
tableData: [
{
date: '',
name: '',
address: ''
}
]
},
rules: {
date: [
{required: true, message: '日期', trigger: 'change'},
],
name: [
{required: true, message: '姓名', trigger: 'blur'},
],
address: [
{required: true, message: '地址', trigger: 'blur'},
],
}
};
},
methods: {
add () {
this.tableFormData.tableData.push(
{
date: '',
name: '',
address: ''
}
);
},
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$message.success('校验通过');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm (formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
运行结果