Vue-ele添加用戶

添加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>

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容