Vue表格修改功能和退出登录

123 阅读1分钟

添加一个修改标签

 <el-button
            type="primary"
            icon="el-icon-edit"
            @click="update(scope.row)"
          ></el-button>

添加一个修改请求接口

export const userPut = (path='',data={})=> httpServe({path,method:'put',data});

同步调用修改接口并执行修改函数

 update(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogFormVisible = true;
    },
    async submit() {
      try {
        let res = await userPut(`users/${this.form.id}`, {
          id: this.form.id,
          email: this.form.email,
          mobile: this.form.mobile,
        });
        let { meta } = res.data;
        if (meta.status == 200) {
          this.$message.success(meta.msg);
          this.getTableDate();
          this.dialogFormVisible = false;
        } else {
          this.$message.success(meta.msg);
        }
      } catch (err) {
        this.$message.error(err);
      }
    },
    },
    

增加退出登录选项

 <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="quit">退出登录</el-dropdown-item>
          </el-dropdown-menu>

实现退出登录

 quit() {
      localStorage.clear();
      setTimeout(()=>{
        this.$router.push({name:'login'})
      },500)
    },