项目场景：
项目需求对表单表格的字段进行校验
在网上查了很多方法，也没有合适的，于是就用到了element-ui官方提供的Form-Item的属性error
注:用error的话，就不需要为el-form-item添加prop和rules了，直接在el-form-item标签上添加:error="scope.row.error"即可
代码
<el-table :data="formPoint.mapActionList" ref="mapActionList" style="width: 100%"><el-table-column label="动作类型" width="120" prop="actionParam"><template slot-scope="scope"><el-form-item :prop="'mapActionList.' + scope.$index + '.actionType'"><el-select v-model="scope.row.actionType" clearable placeholder="请选择"@input="onExchange(scope.$index)"><el-option v-for="item in typeList" :label="item.label" :value="item.value" :key="item.index"></el-option></el-select></el-form-item></template></el-table-column><el-table-column label="相机焦距" width="100"><template slot-scope="scope"><el-form-item :prop="'mapActionList.' + scope.$index + '.photoZoom'" :error="scope.row.photo"><el-input clearable placeholder="焦距值" v-model="scope.row.photoZoom"@input="onExchange(scope.$index, scope.row, 'photo')"></el-input></el-form-item></template></el-table-column><el-table-column label="飞机偏航角" width="110"><template slot-scope="scope"><el-form-item :prop="'mapActionList.' + scope.$index + '.heading'" :error="scope.row.yaw"><el-input placeholder="偏航角值" clearable v-model="scope.row.heading"@input="onExchange(scope.$index, scope.row, 'yaw')"></el-input></el-form-item></template></el-table-column><el-table-column label="云台俯仰角" width="100"><template slot-scope="scope"><el-form-item :prop="'mapActionList.' + scope.$index + '.gimbalPitch'" :error="scope.row.gimbal"><el-input placeholder="俯仰角值" clearable v-model="scope.row.gimbalPitch"@input="onExchange(scope.$index, scope.row, 'gimbal')"></el-input></el-form-item></template></el-table-column><el-table-column label="拍摄照片名" width="185"><template slot-scope="scope"><el-form-item :prop="'mapActionList.' + scope.$index + '.fileCustomName'" :error="scope.row.error"><el-input placeholder="巡检目标名称" v-model="scope.row.fileCustomName" clearable@input="onExchange(scope.$index, scope.row, 'fileCustom')"></el-input></el-form-item></template></el-table-column></el-table>
//表格表单嵌套太深，需要强制更新onExchange(index, row, name) {let moment = this.mapActionList[index]; // 此处的mapActionList为自己的table表格绑定的data数组this.$set(this.mapActionList, index, moment);// 此处是将修改的那一行的数据重新赋值给table表格对应的那一行,触发热更新//此处(脱离表单)进行校验let reg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,15})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,15}|180)$/;if (name == 'fileCustom') {if (row.fileCustomName.length > 9) {row.fileCustomName = row.fileCustomName.slice(0, 9)row.error = "照片名最多9个字符"}else {row.error = ""}} else if (name == 'photo') {if (row.photoZoom === "") {row.photo = "请输入焦距"} else if (row.photoZoom < 0) {row.photo = "最小值为0"} else {row.photo = ""};} else if (name == 'yaw') {if (row.heading === "") {row.yaw = "范围：-180~180"} else if (!row.heading.match(reg)) {row.yaw = "范围：-180~180"} else {row.yaw = ""};} else if (name == 'gimbal') {if (row.gimbalPitch === "") {row.gimbal = "范围：-90~30"} else if (row.gimbalPitch >= 31 || row.gimbalPitch <= -91) {row.gimbal = "范围：-90~30"} else {row.gimbal = ""};}},
最终效果：
注：以上是完整的代码，有什么不懂的可以提问题哈~首次记录，由有不足可提意见哈~
