element-ui中怎么使用表单(input)?绑定、校验

绑定:
在el-form标签上绑定数据::model=“userForm”

校验::rules=“userRules”
在子标签el-form-item中添加props属性props=“userRules里面设置的数组名”

 <el-form
          :model="userForm"
          ref="adduser"
          :rules="userRules"
          label-position="left"
          label-width="80px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="userForm.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
userForm: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      userRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 6, max: 30, message: "长度在 6 到 30 个字符", trigger: "blur" }
        ]
      },

如何实现表单的初始化?

       <!-- 设置slot-scope="scope"  再点击事件里面写scope.row就能够写出数据初始化 -->
       <template slot-scope="scope">
            <el-row>
              <el-button
                type="primary"
                @click="editUser(scope.row)"
                size="mini"
                icon="el-icon-edit"
                circle
              ></el-button>
 
            </el-row>
          </template>
   // 编辑用户,打开
    editUser(user) {
      this.userForm = user;
    },

猜你喜欢

转载自blog.csdn.net/lqlq54321/article/details/106888029