vue添加用户

页面渲染

<template>
  <div class="users">
    <el-row>
      <el-button type="primary" round @click="drawer = true"
        >添加用户</el-button
      >
    </el-row>
    <!-- :wrapperClosable="false" 表示点击遮罩区域不关闭抽屉 true则可以 -->
    <el-drawer
      title="添加用户"
      :visible.sync="drawer"
      :direction="direction"
      :wrapperClosable="false"
    >
      <add-users @addok="addok"/>
    </el-drawer>
    <!-- el-table组件 需要给data属性动态传递一个数组对象tableData -->
    <el-table :data="tableData">
      <!-- el-table-column组件 表格中的数据 是数组对象tableData中的属性date所对应的值
      比如 date属性的值对应的2016-05-02 -->
      <!-- 表头标题 是由label属性来传递的 width属性是表示表头字段的宽度 不给宽度就自适应表格 -->
      <el-table-column label="创建日期">
        <template slot-scope="scope">
          <div>{{ scope.row.create_time | getDate }}</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 AddUsers from '@/components/AddUsers.vue'
import axios from "axios";
export default {
  name:"UsersView",
  components:{
    AddUsers
  },
  data() {
    return {
      /* 表格数据 */
      tableData: [],
      /* 抽屉打开方向从右到左 */
      direction: "rtl",
      /* 默认抽屉是关闭的 */
      drawer: false,
    };
  },
  /* 局部的过滤器 */
  // filters:{
  //   getDate(v){
  //     /* 生成当前时间戳的日期对象 */
  //     let oDate = new Date(v);
  //     return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate();
  //   }
  // },
  created() {
    /* 一进入页面调用获取用户数据接口 */
    this.getTableDate();
  },
  methods: {
    /* 当子组件添加数据成功的时候触发的方法 */
    addok(){
      /* 重新获取用户数据 */
      this.getTableDate();
      /* 关闭抽屉 */
      setTimeout(()=>{
        this.drawer = false;
      },600)
    },
    getTableDate() {
      axios
        .get("url", {
          /* 请求头 */
          headers: {
            Authorization: localStorage.token,
          },
          /* 必传的请求参数 */
          params: {
            pagenum: 1,
            pagesize: 20,
          },
        })
        .then((res) => {
          let { data, meta } = res.data;
          /* 当状态为200表示数据获取成功 */
          if (meta.status == 200) {
            /* 把数据给到tableData数组中 */
            this.tableData = data.users;
          } else {
            /* 如果获取数据有误，给出相应提示 */
            this.$message.error(meta.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>

添加用户组件：

<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:'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>