elmentui表格中对单元格做表单校验

elmentui表格中对单元格做表单校验

1.在需要的表单上用:rules绑定需要校验的规则
2.编辑自定义表单校验规则注意自定义的代码块可以不与使用规则的字段名一致建议与使用校验的字段一致

 rules: {
        name: [{ required: true, validator: myRules.required, trigger: 'blur' }, {
          min: 2,
          max: 20,
          message: '请输入2～20个字符',
          trigger: 'blur'
        }]
      },
      miniDiscount: [
              { required: true, message: '请输入折扣', trigger: 'blur' },
            ]
    }

2.在表单组件中嵌套表格
3.在单元格定义form-item的prop为salesDiscountPermissionsRoles.‘+scope.$index+’.miniDiscount因为要对每一行的表单校验salesDiscountPermissionsRoles为当前绑定的数组
使用多个字段建议饭rules通过reles.校验规则点出来，例如rules.name引用

<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="100px">
 <el-table
           :data="form.salesDiscountPermissionsRoles"
            max-height="350"
            style="width: 100%"
            stripe
            border
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :cell-style="{fontWeight:'normal'}"
            size="mini"
          >
 <el-table-column prop="miniDiscount" label="最低折扣(%)" align="center" >
<template slot-scope="scope">
 <el-form-item          
  label=""  
  :prop="'salesDiscountPermissionsRoles.'+scope.$index+'.miniDiscount'"     :rules="miniDiscount">
       <el-input
              v-model="scope.row.miniDiscount"
              size="mini"
              style="width:150px;"
              type="text"
              placeholder="请输入0-99"
              onkeyup="this.value=this.value.replace(/\D/g,'')"
              onafterpaste="this.value=this.value.replace(/\D/g,'')"
              maxlength="2"
            />
    </el-form-item>
   </template>
 </el-table-column>
 </el-table>
 </el-from>

相关校验规则请查看el官网可在其中自定义校验规则
https://element.eleme.cn/#/zh-CN/component/form