绑定:
在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;
},