在el-table中进行每个单元格的校验,并且批量提交,使用el-form嵌套el-table的方法
代码如下,注意el-form中要设置 ref,model,
<el-form ref="addForm" :model="formdata" :rules="formdataRules">
<el-table
:data="formdata.employeeData"
style="width: 80%; margin: 0 auto"
>
<el-table-column type="index" label="序号" width="50">
</el-table-column>
<el-table-column prop="EmployeeName" label="设计师名称" width="200">
</el-table-column>
<el-table-column prop="SuplierName" label="供方名称"> </el-table-column>
<el-table-column prop="LevelName" label="设计师等级" width="200">
<template slot-scope="scope">
<el-form-item
style="margin-bottom: 0px"
:prop="'employeeData.' + scope.$index + '.LevelName'"
:rules="[
{
required: true,
message: '设计师等级不能为空',
trigger: 'change',
},
]"
>
<el-select
style="width: 100%"
v-model="scope.row.LevelId"
placeholder="请选择"
@change="getLevelName($event, scope.row)"
>
<el-option
v-for="item in levelNameList"
:key="item.LevelId"
:label="item.LevelName"
:value="item.LevelId"
>
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
data() {
return {
visible: false,
typeName: "已评级",
type: 1,
keyword: "",
formdata: {
employeeData: [],
},
levelNameList: [],
formdataRules: {},
};
},
this.$refs["addForm"].validate((valid) => {
if (valid) {
//submit接口
} else {
this.$message.error("填写有误,请修改!");
return false;
}
});