Element UI在dialog對話方塊中巢狀form表單的使用
阿新 • • 發佈:2020-12-18
Element UI在dialog對話方塊中巢狀form表單的使用
html部分
<el-button type="primary" @click="adduser">新增使用者</el-button>
<el-dialog title="新增使用者" :visible.sync="dialogFormVisible">
<el-form
:model="userForm"
ref="userForm"
:rules="rules"
label-position="left"
>
<el-form-item label="使用者名稱稱" prop="name">
<el-input v-model="userForm.name"></el-input>
</el-form-item>
< el-form-item label="使用者電話" prop="tel">
<el-input v-model="userForm.tel"></el-input>
</el-form-item>
<el-form-item label="使用者性別" prop="sex">
<template>
<el-select
v- model="userForm.sex"
clearable
placeholder="請選擇性別"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-form-item>
<el-form-item label="使用者簡介" prop="introduction">
<el-input v-model="userForm.introduction"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="confirmAddUser(userForm)"
>確 定</el-button
>
</div>
</el-dialog>
js部分
data() {
return {
userForm: {},
dialogFormVisible: false,
rules: { //表單驗證
name: [{ required: true, message: "請輸入使用者名稱稱", trigger: "blur" }],
tel: [{ required: true, message: "請輸入使用者電話", trigger: "blur" }],
sex: [{ required: true, message: "請選擇使用者性別", trigger: "blur" }],
introduction: [
{ required: true, message: "請輸入使用者簡介", trigger: "blur" }
]
},
options: [ //下拉框選項
{
value: "1",
label: "男"
},
{
value: "2",
label: "女"
}
]
};
},
methods:{
adduser() {
this.dialogFormVisible = true;
},
confirmAddUser(form) {
this.$refs.userForm.validate(valid => {
if (valid) { //表單驗證通過
console.log(form); //form就是form表單物件
this.loading = true;
this.$http
.post("http://127.0.0.1:8888/user/create", { data: form })
.then(res => {
// console.log(res);
this.loading = false;
this.dialogFormVisible = false;
this.getList();//重新呼叫渲染列表的方法
this.$message({ message: "新增成功", type: "success" });
});
} else {
console.log("error submit!!");
return false;
}
});
}
}