表格input 加校验

 

 

 

<template>
  <el-row >

   <el-button type="primary" @click="updateawData">保存</el-button>

          <el-form :model="tableData" ref="tableData">

          <el-table :data="tableData">
            <el-table-column show-overflow-tooltip type="selection" width="40" />

            <el-table-column show-overflow-tooltip prop="wireLossRate" label="线(%)" width="120">
              <template slot-scope="scope">

                  <el-form-item prop="wireLossRate" :prop="scope.$index + '.ireLossRat'" :rules='rules.wireLossRate'>
                    <el-input v-if="seen" v-model="scope.row.wireLossRate" @blur="loseFocus(scope.row,scope.column)" />
                    <span v-else>{{ scope.row.wireLossRate }}</span>
                  </el-form-item>

              </template>
            </el-table-column>
          </el-table>
          </el-form>

  
  
    </el-row>
 
</template>
<script>

export default {

  data() {
    //
    const validateNameInput = (rule, value, callback) => {
      const reg = /^([0](\.\d{1,4})?|1(\.[0]{1,4})?)$/
      if (!value) {
        this.$vMessage({
          message: '请输入要修改的值',
          type: 'warning'
        })
      } else if (reg.test(value)) {
        callback()
      } else {
        this.$vMessage({
          message: '请填写0-1，小数点保留后4位的数字',
          type: 'warning'
        })
      }}
    return {
      // input验证
      rules: {
        wireLossRate: [{ validator: validateNameInput, trigger: 'blur' }]
      },

    }
  },
  methods: {
    // 保存修改数据
    async updateDrawData() {
      const valid = await this.$refs['tableData'].validate()
      if(valid){
        // 校验通过
      }else{
        this.$vMessage({
          type: 'info',
          message: '校验不通过'
        })
      }
    },
  }
}
</script>