VUE：elmenet框架真实接口

一：当跳转路径多次获取 后台有提示 在router的index加入这个 关闭提示

    const originalPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
    }
    

二 具名作用域的方式占位 然后通过scope.row方式传递参数

elemet表格的使用

     <template slot-scope="scope">
            <div>{{scope.row.create_time | getDate}}</div>
          </template>
          

通过全局过滤器的方式将时间转换

   <el-table :data="tableData"  style="width: 100%">
  <el-table-column
    prop="create_time"
    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>
 data() {
    return {
      tableData: [],
        drawer: false,
       direction: 'rtl',
    }
  },
  components:{
        AddUser
  },
  created() {
    this.getUsers()
  },
   methods: {
    addok(){
      this.getUsers()
      setTimeout(()=>{
        this.drawer=false
      },2000)

    },
     getUsers(){ axios.get("users",{
    params:{
      pagenum:1,
      pagesize:200
    },
    headers:{
      'Authorization':localStorage.token
    }
  })
  .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)
  })
}

},

三 抽屉的功能

  <div class="add-user">
<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" 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>

 export default {
    data() {
      return {
        ruleForm: {
          username: '',
          password:"",
          mobile:"",
          email:""
        },
    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:"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();
      }
    }
  }

父这边 接收这个事件 然后创建完成之后自动更新页面 然后将这个抽屉关闭

四 当接口为真实接口的时候

截取的时候就是除了默认显示的0 从索引1到最后

方法也将名称改为接口对应的数据