添加ele抽屜插件
? ? <el-drawer
? ? ? title="添加用戶"
? ? ? :visible.sync="drawer"
? ? ? :direction="direction"
? ? ? :wrapperClosable='false'??表示點擊其他區域不關閉?
? ? >
<!-- 插入AddUser組件?-->
? ? ? <AddUser @addok='addok'></AddUser>
? ? </el-drawer>
?methods: {
? ? /* 當子組件添加數據成功的時候觸發方法 */
? ? addok(){
? ? ? /* 刷新頁面數據 */
? ? ? this.getTableDate();
? ? ? /* 關閉抽屜 */
? ? ? this.drawer=false
? ? },}
插入AddUser組件
<template>
? <div class="add-users">
? ? <el-form
? ? ? :model="ruleForm"
? ? ? :rules="rules"
? ? ? ref="ruleForm"
? ? ? label-width="100px"
? ? ? class="demo-ruleForm"
? ? >
? ? ? <el-form-item label="用戶名稱" prop="username">
? ? ? ? <el-input v-model="ruleForm.username"></el-input>
? ? ? </el-form-item>
? ? ? <el-form-item label="用戶密碼" prop="password">
? ? ? ? <el-input v-model="ruleForm.password"></el-input>
? ? ? </el-form-item>
? ? ? <el-form-item label="電子郵箱" prop="email">
? ? ? ? <el-input v-model="ruleForm.email"></el-input>
? ? ? </el-form-item>
? ? ? <el-form-item label="手機號碼" prop="mobile">
? ? ? ? <el-input v-model="ruleForm.mobile"></el-input>
? ? ? </el-form-item>
? ? ? <el-form-item>
? ? ? ? <el-button type="primary" @click="submitForm('ruleForm')"
? ? ? ? ? >立即添加</el-button
? ? ? ? >
? ? ? ? <el-button @click="resetForm('ruleForm')">重置</el-button>
? ? ? </el-form-item>
? ? </el-form>
? </div>
</template>
<script>
import axios from "axios";
export default {
? data() {
? ? return {
? ? ? ruleForm: {
? ? ? ? username: "",
? ? ? ? password: "",
? ? ? ? email: "",
? ? ? ? mobile: "",
? ? ? },
? ? ? rules: {
? ? ? ? username: [
? ? ? ? ? { required: true, message: "請輸入用戶名稱", trigger: "blur" },
? ? ? ? ? {
? ? ? ? ? ? min: 3,
? ? ? ? ? ? max: 12,
? ? ? ? ? ? message: "長度在 3 到 12 個字符",
? ? ? ? ? ? trigger: "blur",
? ? ? ? ? },
? ? ? ? ],
? ? ? ? password: [
? ? ? ? ? { required: true, message: "請輸入用戶密碼", trigger: "blur" },
? ? ? ? ? {
? ? ? ? ? ? min: 3,
? ? ? ? ? ? max: 12,
? ? ? ? ? ? message: "長度在 3 到 12 個字符",
? ? ? ? ? ? trigger: "blur",
? ? ? ? ? },
? ? ? ? ],
? ? ? },
? ? };
? },
? methods: {
? ? submitForm(formName) {
? ? ? this.$refs[formName].validate((valid) => {
? ? ? ? if (valid) {
? ? ? ? ? axios({
? ? ? ? ? ? method: "post",
? ? ? ? ? ? url: "https://*****.top.****/api/private/v1/users",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? username: this.ruleForm.username,
? ? ? ? ? ? ? password: this.ruleForm.password,
? ? ? ? ? ? ? email: this.ruleForm.email,
? ? ? ? ? ? ? mobile: this.ruleForm.mobile,
? ? ? ? ? ? },
? ? ? ? ? ? headers:{
? ? ? ? ? ? ? ? Authorization: localStorage.token
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? ? .then(res=>{
? ? ? ? ? ? ? let {meta}=res.data;
? ? ? ? ? ? ? if(meta.status==201){
? ? ? ? ? ? ? ? ? this.$message.success(meta.msg)
? ? ? ? ? ? ? ? ? this.$emit('addok')
? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? this.$message.error(meta.msg)
? ? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? this.$message.error("添加失敗");
? ? ? ? ? return false;
? ? ? ? }
? ? ? });
? ? },
? ? resetForm(formName) {
? ? ? this.$refs[formName].resetFields();
? ? },
? },
};
</script>
