zoukankan      html  css  js  c++  java
  • 表格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>
  • 相关阅读:
    layui框架如何在停止服务用户操作任何步骤自动跳转登录页
    h5移动端和ios以及安卓客户端的接口联调
    sublime 主要使用方法
    内外边距、浮动、布局相关
    js介绍
    css的三个特性 背景透明设置
    选择器 导航制作相关
    表单综合
    自定义列表dl
    相对路径和绝对路径
  • 原文地址:https://www.cnblogs.com/javascript9527/p/12574717.html
Copyright © 2011-2022 走看看