一、Form表单校验
以下是From表单的核心代码，主要是对<el-form-item>添加prop属性
<el-form ref="ruleForm" :rules="rules" :model="cabinInfo">
<el-row :gutter="0">
<el-col :span="2" class="col-2" style="border-left: 1px solid #ccc;">
<div class="grid-content bg-purple">
<p><span>*</span>航空公司:</p>
</div>
</el-col>
<el-col :span="4" class="col-4" style="">
<div class="grid-content bg-purple">
<el-form-item style="margin: 0;margin-left: 5px;" prop="airlines">
<el-input v-model="cabinInfo.airlines" auto-complete="off" size="small" style="width: 180px;" />
</el-form-item>
</div>
</el-col>
<el-col :span="2" class="col-2" style="">
<div class="grid-content bg-purple">
<p><span>*</span>舱位:</p>
</div>
</el-col>
<el-col :span="4" class="col-4" style="">
<div class="grid-content bg-purple">
<el-form-item label="" style="margin: 0;margin-left: 5px;" prop="berths">
<!--<span>{{form.orderId}}</span>-->
<el-input v-model="cabinInfo.berths" auto-complete="off" size="small" style="width: 180px;" />
</el-form-item>
</div>
</el-col>
<el-col :span="2" class="col-2" style="">
<div class="grid-content bg-purple">
<p><span>*</span>舱位名:</p>
</div>
</el-col>
<el-col :span="4" class="col-4" style="">
<div class="grid-content bg-purple">
<el-form-item style="margin: 0;margin-left: 5px;" prop="berthsName">
<el-input v-model="cabinInfo.berthsName" auto-complete="off" size="small" style="width: 180px;" />
</el-form-item>
</div>
</el-col>
<el-col :span="2" class="col-2" style="">
<div class="grid-content bg-purple">
<p><span>*</span>行李:</p>
</div>
</el-col>
<el-col :span="4" class="col-4" style="">
<div class="grid-content bg-purple">
<el-form-item style="margin: 0;margin-left: 5px;" prop="luggage">
<el-input v-model="cabinInfo.luggage" auto-complete="off" size="small" style="width: 180px;" />
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
rules.js ：可以单独维护一个rule的js，通过mixin的方式混入
export default {
data() {
return {
rules: {
'airlines': [{
required: true,
trigger: 'blur',
message: '请输入航空公司'
}],
'berths': [{
required: true,
trigger: 'blur',
message: '请输入舱位'
}],
'berthsName': [{
required: true,
trigger: 'blur',
message: '请输入舱位名称'
}],
'luggage': [{
required: true,
trigger: 'blur',
message: '请输入行李'
}],
'berthsLuggage.consignLuggage': [{
required: true,
trigger: 'blur',
message: '请输入托运行李重量'
}],
'berthsLuggage.consignSize': [{
required: true,
trigger: 'blur',
message: '请输入托运行李尺寸'
}],
'berthsLuggage.handLuggage': [{
required: true,
trigger: 'blur',
message: '请输入手提行李重量'
}],
'berthsLuggage.handSize': [{
required: true,
trigger: 'blur',
message: '请输入手提行李尺寸'
}],
'berthsLuggage.accord': [{
required: true,
trigger: 'blur',
message: '请选择大客户协议'
}],
'berthsTicketPolicy.sequence': [{
required: true,
trigger: 'blur',
message: '请输入序号'
}],
'berthsTicketPolicy.timeDescribe': [{
required: true,
trigger: 'blur',
message: '请输入时间描述'
}],
'berthsTicketPolicy.time': [{
required: true,
trigger: 'blur',
message: '请输入具体时间'
}],
'berthsTicketPolicy.ruleDate': [{
required: true,
trigger: 'blur',
message: '请输入规则执行开始时间'
}],
'berthsTicketPolicy.price': [{
required: true,
trigger: 'blur',
message: '请输入退改手续费'
}],
'berthsBigCustomerPrice.bigCustomerPrice': [{
required: true,
trigger: 'blur',
message: '请输入大客户手续费'
}],
'berthsBigCustomerPrice.ruleDate': [{
required: true,
trigger: 'blur',
message: '请输入规则执行开始时间'
}],
'berthsBigCustomerPrice.orgName': [{
required: true,
trigger: 'blur',
message: '请输入组织机构'
}],
test: [{
required: true,
trigger: 'blur',
message: '请输入组织机构'
}],
}
}
}
}
提交表单的操作
alterCabinConfirmFun() {
this.$refs['ruleForm'].validate(valid => {
if(valid) {
//提交保存的操作
} else {
this.$message.error('表单验证不通过,请检查核对相应字段')
}
})
},
二、对Table的校验
对Table的校验，仍然需要包裹一个<el-form>标签，最关键的问题在于如何给<el-form-item> 动态绑定prop
<el-form ref="ruleForm" :model="form" :rules="rules">
<el-table :key="tableKey" :data="form.berthsLuggage" v-show="luggageInfoShow" border fit highlight-current-row style="width: 100%;cursor: pointer;">
<el-table-column label="" align="center" fixed="left" width="40">
<template slot-scope="scope">
<span style="display:block;width: 15px;font-size: 16px;" @click="handleClickDel(scope.$index, form.berthsLuggage,scope.row.id)">-</span>
</template>
</el-table-column>
<el-table-column label="序号" align="center" width="60">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="*运行李重量" align="center" >
<template slot-scope="scope">
<el-form-item :prop="'berthsLuggage.' + scope.$index + '.consignLuggage'" :rules="rules['berthsLuggage.consignLuggage']">
<el-input v-model="scope.row.consignLuggage" auto-complete="off" size="small" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="*托运行李尺寸" align="center" >
<template slot-scope="scope">
<el-form-item :prop="'berthsLuggage.' + scope.$index + '.consignSize'" :rules="rules['berthsLuggage.consignSize']">
<el-input v-model="scope.row.consignSize" auto-complete="off" size="small" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="*手提行李重量" align="center" >
<template slot-scope="scope">
<el-form-item :prop="'berthsLuggage.' + scope.$index + '.handLuggage'" :rules="rules['berthsLuggage.handLuggage']">
<el-input v-model="scope.row.handLuggage" auto-complete="off" size="small" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="*手提行李尺寸" align="center" >
<template slot-scope="scope">
<el-form-item :prop="'berthsLuggage.' + scope.$index + '.handSize'" :rules="rules['berthsLuggage.handSize']">
<el-input v-model="scope.row.handSize" auto-complete="off" size="small" />
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
上述代码中需要注意的地方：
1.<el-table :data="form.berthsLuggage">其中绑定的数据是<el-form ref="ruleForm" :model="form" :rules="rules">form中的一个属性
2. :prop="‘berthsLuggage.’ + scope.$index + ‘.consignLuggage’"
3. :rules=“rules[‘berthsLuggage.consignLuggage’]”（:rules=“rules.test”）需要注意obj.a和obj[‘a’]的区别
<el-form-item :prop="'berthsLuggage.' + scope.$index + '.consignLuggage'" :rules="rules['berthsLuggage.consignLuggage']">
<el-input v-model="scope.row.consignLuggage" auto-complete="off" size="small" />
</el-form-item>
