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>
  • 相关阅读:
    帝国cms7.0 内容页控制简介字数!
    帝国cms后台 不同栏目发布字段不同
    帝国cms7.0 列表模板调用本栏目缩略图
    戏说三国战纪
    灵动标签调用指定专题
    帝国cms7.0调用出栏目下的东西
    任天堂的游戏之路
    DC游戏《斑鸠》原创赏析[转载]
    一,PHP 语法
    给自己的网站加入“保存到桌面”的按钮
  • 原文地址:https://www.cnblogs.com/javascript9527/p/12574717.html
Copyright © 2011-2022 走看看