主要实现就是form嵌套table
代码有些长 这里只写大体的东西 一些非必要的属性就省略以方便参考
<el-form :model="table" :rules="rules" ref="validForm"> //外壳form主要是校验
<el-table :data="table.tableData" border> //页面显示的列表
<el-table-column label="显示标题">
<template slot-scope="scope"> //table的插槽自定义写法详情看element官网自定义列表
<el-form-item
:prop="`tableData[${scope.$index}].title`" //这个是传递每个值用来校验 和rules一定要对应上
:rules="rules.title"> //如果是固定的可以直接绑定rules里的规则
<el-input v-model="scope.row.title"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="显示标题">
<template slot-scope="scope">
<el-form-item
:prop="`tableData[${scope.$index}].name`"
:rules=""[
{ required: true, message: '请选择', trigger: 'blur' } //这里展示第二种rules写法
]">
<el-date-picker
v-model="scope.row.name"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
//下面就是正常的提交就可以触发校验了
this.$refs.validForm.validate((valid)=>{
if(vaild){}
})
