需求如下
1、ERP编号 有值 那么ERP吨数必填
2、ERP件数必填
使用el-form结合el-table进行表单验证
代码涉及如下
1、表头添加*号必填
2、点击提交 提示需要输入的地方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../../3rd/elementui/index.2.15.9.css" />
<style>
.el-form.my-ruleForm .table_change_style .el-table__row .el-form-item__content,
.el-form.my-ruleForm .el-form-item.no_Left .el-form-item__content {
margin-left: 0 !important;
}
.el-form.my-ruleForm .table_change_style .el-table__row .el-form-item {
width: 100%;
margin-bottom: 0;
padding: 10px 0;
}
.el-table td,
.el-table th {
padding: 0;
}
</style>
</head>
<body>
<div id="app">
<el-form
label-width="160px"
:model="ruleForm"
:rules="rules"
ref="ruleForm"
class="my-ruleForm"
>
<el-table
class="table_change_style"
border
:data="ruleForm.actualSendReceiveDetails"
ref="multipleTable"
@selection-change="handleSelectionChange"
:row-key="(row)=>{return row.currentTime}"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="序号" width="50">
<template slot-scope="scope"> {{scope.$index+1}} </template>
</el-table-column>
<el-table-column
v-for="(d,index1) in goodDetailHeader"
:key="index1"
:prop="d.fieldName"
:label="d.columnComments"
>
<template slot="header">
<div class="tc"><i class="red_xing" v-if="d.isRequire">*</i> {{d.columnComments}}</div>
</template>
<template slot-scope="scope">
<div>
<el-form-item
v-if="d.fieldName=='erpWeight'"
:prop="'actualSendReceiveDetails.' + scope.$index + '.erpWeight'"
:rules="scope.row.erpCode ? rules.erpWeight : []"
>
<el-input v-model="scope.row.erpWeight" class="w_90"></el-input>
</el-form-item>
<el-form-item v-else-if="d.fieldName=='erpCount'"
:prop="'actualSendReceiveDetails.' + scope.$index + '.erpCount'"
:rules="rules.erpCount"
>
<el-input
v-model="scope.row[d.fieldName]"
class="w_90"
></el-input>
</el-form-item>
<el-form-item v-else>
<el-input
v-if="d.columnType=='input-text'"
v-model="scope.row[d.fieldName]"
class="w_90"
></el-input>
<div v-else>{{scope.row[d.fieldName]}}</div>
</el-form-item>
</div>
</template>
</el-table-column>
</el-table>
<el-button @click="submit" type="button">提交</el-button>
</el-form>
</div>
<script src="../../3rd/vue/vue.min.js"></script>
<script src="../../3rd/elementui/index.2.15.9.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
type: 'add',
goodDetailHeader: [
{
fieldName: 'erpCode',
columnComments: 'ERP单据编号',
isRequire: false,
columnType: 'input-text'
},
{
fieldName: 'erpWeight',
columnComments: 'ERP吨数',
isRequire: false,
columnType: 'input-text'
},
{
fieldName: 'erpCount',
columnComments: 'ERP件数',
isRequire: true,
columnType: 'input-text'
},
{
fieldName: 'avgWeight',
columnComments: '平均件重',
isRequire: false,
columnType: 'text'
},
{
fieldName: 'currentWeight',
columnComments: '本次核销吨数',
isRequire: false,
columnType: 'input-text'
},
{
fieldName: 'currentNumber',
columnComments: '本次核销件数',
isRequire: false,
columnType: 'input-text'
}
],
ruleForm: {
actualSendReceiveDetails: [
{
erpCode: '',
erpWeight: null,
erpCount: null,
avgWeight: null,
currentNumber: null,
currentWeight: null,
isShow: false
},
{
erpCode: '',
erpWeight: null,
erpCount: null,
avgWeight: null,
currentNumber: null,
currentWeight: null,
isShow: false
}
]
},
rules: {
erpWeight: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
erpCount: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
}
}
},
methods: {
handleSelectionChange() {},
submit() {
let self = this
this.$refs['ruleForm'].validate((valid, obj) => {
console.log(valid)
if (valid) {
console.log(valid)
} else {
return false
}
})
}
}
})
</script>
</body>
</html>