页面渲染
<template>
<div class="users">
<el-row>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
点我打开
</el-button>
</el-row>
<el-drawer
title="我是标题"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose">
<add-users></add-users>
</el-drawer>
<el-table :data="tableData">
<el-table-column prop="create_time" label="创建日期">
<template slot-scope='scope'>
<div>
<div>{{scope.row.create_time|getData}}</div>
</div>
</template> </el-table-column>
<el-table-column prop="email" label="电子邮箱" > </el-table-column>
<el-table-column prop="mobile" label="手机号码"> </el-table-column>
<el-table-column prop="role_name" label="角色名称"> </el-table-column>
<el-table-column prop="username" label="用户名"> </el-table-column>
</el-table>
</div>
</template>
<script>
import axios from "axios";
import AddUsers from '@/components/AddUsers.vue'
export default {
components:{
AddUsers
},
data() {
return {
tableData: [],
direction:"rtl",
drawer:false,
};
},
created(){
this.getTableData()
},
methods: {
addok(){
this.getTableData(),
setTimeout(()=>{
this.drawer = false;
},500)
},
getTableData() {
axios
.get("********", {
headers: {
Authorization: localStorage.token,
},
params: {
pagenum: 1,
pagesize: 10,
},
})
.then((res) => {
console.log(res);
let { data, meta } = res.data;
if (meta.status == 200) {
this.tableData = data.users;
} else {
this.$message.error(meta.msg);
}
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
<style lang="scss" scoped>
.users{
padding: 20px;
}
</style>
创建子组件，在子组件里面使用抽屉，插入到上面
<template>
<div class="add-users">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<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" type="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:'*********',
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>
<style lang="scss" scoped>
.add-users {
padding: 20px;
}
</style>
