zoukankan      html  css  js  c++  java
  • Element 表单使用 数字类型

    Element 表单使用 数字类型

    01)  el-input 数字类型  和 el-input-number 计数器

    02) 表单动态校验

    <template>
      <div style=" 400px">
    
        <el-form ref="form" :model="form" :rules="rules" label-width="70px">
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="form.age" placeholder="请输入年龄"/>
          </el-form-item>
        </el-form>
    
        <el-form ref="form2" :model="form2" :rules="rules2" label-width="70px">
          <el-form-item label="年龄2" prop="age">
            <el-input-number v-model="form2.age" placeholder="请输入年龄2"/>
          </el-form-item>
        </el-form>
    
        <div>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
    
          <el-button @click="addRules()">添加规则</el-button>
          <el-button @click="removeRules()">移除规则</el-button>
        </div>
    
      </div>
    </template>
    <script>
    
    /* 这是ElementUI */
    import Vue from 'vue'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import login from "../httpPage/login";
    Vue.use(ElementUI);
    /* 这是ElementUI */
    
    
    export default {
      data() {
        return {
          form: {},  // 表单参数
          rules: {   // 表单校验
            age: [
              {required: true, message: "年龄不能为空", trigger: "blur"},
              {type: 'number', max: 99, message: '年龄必须为数字值,最大99'}
            ],
          },
          // 第二个表单
          form2: {},  // 表单参数
          rules2: { // 表单校验
            age: [
              {required: true, message: "年龄不能为空", trigger: "blur"},
              {type: 'number', max: 99, message: '年龄必须为数字值,最大99'}
            ],
          }
        }
      },
      methods: {
        submitForm() {
          console.log(this.form);
          this.$refs["form"].validate((valid)=>{
            console.log(valid);
          })
          this.$refs["form2"].validate((valid2)=>{
            console.log(valid2);
          })
        },
        resetForm() {
          this.$refs.form.resetFields();
          this.$refs.form2.resetFields();
    
          this.form.age = '';
          this.form2.age = undefined;
        },
        removeRules() { // 移除规则
          this.$refs.form.clearValidate(["age"]);
          this.rules = {...this.rules, age: []}
        },
        addRules() { // 添加规则
          let age = [
            {required: true, message: "年龄不能为空", trigger: "blur"},
            {type: 'number', max: 99, message: '年龄必须为数字值,最大99'}
          ];
          this.rules = {...this.rules, age: age};
        }
      },
    };
    </script>
    
    <style scoped>
    
    </style>

     

    官方地址:

    数字类型验证    &&   InputNumber 计数器

  • 相关阅读:
    单调栈
    LRU先进先出算法
    IntelliJ IDEA 的安装
    IntelliJ IDEA 的介绍
    Tampermonkey 油猴脚本例子2
    Tampermonkey 油猴脚本例子
    Python PIL.Image 图片操作
    Python os 备查
    Pytorch tensor 常用操作 备查
    Pytorch torchvision.utils.save_image 图片保存工具
  • 原文地址:https://www.cnblogs.com/dafei4/p/15681908.html
Copyright © 2011-2022 走看看