vue中表格中el-input简单验证不能为空

476 阅读1分钟

1、代码

    <el-table
      :data="formData.tableData"
      :header-cell-style="setHeaderCellStyle"
      height="calc(100vh - 185px)"
      size="mini"
      border
    >
        
      <el-table-column label="降水" header-align="center" align="center">
          
        <el-table-column label="平均值(mm)" header-align="center" align="center">
            
          <template slot-scope="scope">
              
            <el-form-item
              :prop="'tableData.' + scope.$index + '.rainavg'"
              :rules="formData.rules.rainavg"
            >
                
              <el-input
                size="mini"
                v-model="scope.row.rainavg"
                placeholder="请输入"
                oninput="value=value.replace(/[^\-?\d.]/g,'')"
                @input="calculatePre(scope.row)"
              ></el-input>
                
            </el-form-item>
              
          </template>
            
        </el-table-column>
          
          <el-table-column label="预报值(mm)" header-align="center" align="center">
              
          <template slot-scope="scope">
              
            <el-form-item
              :prop="'tableData.' + scope.$index + '.rainforcast'"
              :rules="formData.rules.rainforcast"
            >
                
              <el-input
                size="mini"
                v-model="scope.row.rainforcast"
                oninput="value=value.replace(/[^\-?\d.]/g,'')"
                placeholder="请输入"
                @input="calculatePre(scope.row)"
              />
                
            </el-form-item>
              
          </template>
              
        </el-table-column>
          
    </el-table-column>
        
  </el-table>

2、定义

  formData: {

    tableData: [],
    
    rules: {
    
      rainavg: {
      
        required: true,
        
        message: '',
        
        trigger: 'blur',
        
      },
      
      rainforcast: {
      
        required: true,
        
        message: '',
        
        trigger: 'blur',
        
      },
     
    },
    
  }