el-form中不使用model,只使用验证

记录一次,项目使用el-form和e-input的问题,代码部分省略

el-form不使用model,只使用验证功能:

在el-form-item中有个error属性,通过这个属性返回字符串类型,来显示报错信息,在提交时获取this.$refs.tableFormRef.fields中的validateMessage数据,处理改数据判断,是否通过验证.

<el-form ref="tableFormRef" size="mini" label-width="110px">
	<el-table :data="List" size="mini" :pagination="false" border>
          <el-table-column
            v-for="col in columns"
            :key="col.id"
            :prop="col.id"
            :label="col.name"
          >
            <template v-slot="scope">
              <div class="el-row--flex is-align-middle" style="flex-wrap: nowrap;">
                <el-form-item label-width="0" :prop="scope.row['ad_style_id']+col.id" :error="getError(scope.row[col.id])" style="margin-bottom: 0px;">
                  <el-input v-model="scope.row[col.id]" type="text" placeholder="请输入" size="mini"  @input="e => scope.row[col.id] = setNum(e,col.id)" />
                </el-form-item>
              </div>
            </template>
          </el-table-column>
        </el-table>
 </el-form>
 <script>
 getError(e){
 	//根据参数判断返回错误提示信息
 }
 //提交时验证是否通过
  submit() {
      const list = this.$refs.tableFormRef.fields
      const flag = true
      for(const i of list) {
          if (i.validateMessage) {
              flag = false;
              break;
          }
      }
      if (!flag) return
     //执行异步操作
    }
 </script>

el-input处理数据,输入整数或者两位小数

在项目中使用el-input中,使用@input处理数据无效:@input="e => e= setNum(e,col.id)",如上代码,修改:

 <el-input v-model="scope.row[col.id]" type="text" placeholder="请输入" size="mini"  @input="e => scope.row[col.id] = setNum(e,col.id)" />
<script>
setNum(e) {
	   //替换掉数字和小数点 . 之外的字符
	   e = e.replace(/[^\d.]/g, '')
	   // 把2个以上的小数点 . 替换成一个小数点 .
	   e = e.replace(/\.{2,}/g, '.')
	   // 保证第一个字符为数字而不是小数点 .
	   e = e.replace(/^\./g, '')
	   // 保证最后一个字符为数字而不是小数点 .
	   // e = e.replace(/\.$/g, '')
	   // 保证小数点 . 只出现一次，而不能出现两次以上
	   e = e.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
	   // 只能输入两个小数
	   e = e.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
	   return e
 },
</script>