VUE-26 element 修改用户信息

本节：修改用户信息，点击修改，获取用户id，修改对应的用户信息。

1.div

（1.）点击修改，获取修改的用户ID，传参数，写一个获取id的点击事件，连接获取id接口。

ps：在element表单里面，要使用自定义的变量，必须使用<template slot-scope="scope">  </template>，而且点击使用的变量:scope.row.变量名。scope.row.组合等于表单里面的指针

<template slot-scope="scope">

       <el-button type="primary" plain @click="updata(scope.row.id)">修改</el-button>

   </template>

（2.）输入框绑定要修改的用户id

（3.）提交修改，设置点击事件，连接提交修改的接口

2.script

（1.）变量的设置，定义变量接收输入框修改的用户信息数组。 

（2.）点击事件，连接接口。获取用户ID，提交修改。

3.路由的配置

import add   from "../pages/admin/goods_add"   //第一个add是指针，要和compoent的一致，第二个add是.vue文件的名字

const routes = [{
path: "/main", component: Main, children:

[{path: "/main/Goods_add", component: add},]//第一个Goods_add是网址的名字，第二个是指针

},]//这里是子路由
 

最后，完整代码

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.14.1/lib/index.js"></script>
<template>
  <div>
    <div class="usermange">用户管理</div>
    <div style="display: flex">
      <el-form label-width="180px">
        <el-form-item label="根据用户id查找用户信息：">
          <el-input v-model="ida"></el-input>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="suos()"
        style="height: 40px; margin-left: 10px"
        >搜索</el-button
      >
    </div>
    <div style="display:flex">
      <el-form  label-width="180px">
        <el-form-item label="修改用户名字：">
          <el-input v-model="updataUser.name"></el-input>
        </el-form-item>
      </el-form>
               <el-button
        type="primary"
        @click="toupdataname()"
        style="height: 40px; margin-left: 10px"
        >提交修改</el-button
      >
    </div>
    <!-- 第一个显示为真 -->
    <div v-if="one">
      <el-table :data="userList" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <el-table-column
          prop="name"
          label="用户名"
          width="180"
        ></el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <!-- {{ filterTime }} -->
        </el-table-column>
        <el-table-column prop="lastLoginTime" label="最后一次登录时间">
          <!-- {{ filterTime }} -->
        </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="pwd" label="密码"> </el-table-column>
        <el-table-column prop="money" label="余额"> </el-table-column>
        <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" plain @click="updata(scope.row.id)">修改</el-button>
   </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 第2个显示为假 -->
    <div v-if="two">
      <el-table :data="ccc" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <el-table-column
          prop="name"
          label="用户名"
          width="180"
        ></el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <!-- {{ filterTime }} -->
        </el-table-column>
        <el-table-column prop="lastLoginTime" label="最后一次登录时间">
          <!-- {{ filterTime }} -->
        </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="pwd" label="密码"> </el-table-column>
        <el-table-column prop="money" label="余额"> </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 30px">
      <!-- 标签页 -->
      <el-pagination
        background
        :page-size="pagesize"
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      one: true,
      two: false,
      userList: [],
      ida: "",
      id: 0,
      keyword: "",
      pagenum: 1, //默认第一页
      pagesize: 10, //限制有几个显示
      pages: 0,
      total: 0,
      updataUser: {},
      // 接收修改的用户名字
      ccc: [],
      // filterTime:"",
    };
  },
  created() {
    // created()是初始化程序，就是一打开界面就执行的内容
    this.loadUserList(); //一开始就调用
  },
  methods: {
    handleCurrentChange(val) {
      this.pagenum = val;
      this.loadUserList();
    },

    // 获取用户id,然后修改用户名字
    updata(id) {
      var that = this; //方便指对象
      this.axios //axios的接口的调用，根据接口要求进行数据的接收
        .get(`/user/loadById/${id}`)
        .then(function (response) {
          console.log(response);
          that.updataUser = response.data.data;
        });
    },

    toupdataname() {
      // 修改用户名字
      var that = this;
      this.axios
        .post(`/user/update/`,this.updataUser, {
          headers: {
            adminToken: that.common.token, //根据接口要求，填写要传的参数
          },
        })
        .then(function (response) {
          // this.three = true;
          console.log(response); //在控制台输出接收到的信息，response是从服务器接收到的信息，自定义的名字
          that.loadUserList(); //5执行列表的循环输出
          alert("成功修改名字！");
        });
    },
    suos() {
      var that = this;
      this.axios.get(`/user/loadById/${this.ida}`).then(function (response) {
        console.log(response);
        that.ccc = [response.data.data];
        that.one = false;
        that.two = true;

        // this.loadUserList();
      });
    },
    // filters: {
    //   filterTime(val) {
    //     let d = new Date(val);
    //     return d.toLocaleString();
    //   },
    // },

    loadUserList() {
      //显示列表
      var that = this;
      //访问上面的数组，就是把上面之前的东西赋值到that上，就不需要再引入一遍，只需要that即可指到之前的对象
      this.axios
        .get(
          `/user/list/${this.pagenum}/${this.pagesize}?keyword=${this.keyword}`
        )
        //axios.get方式传参。这里注意是`,pagenum是参数，所以上面要先定义
        //${this.}是拼装
        // 这里要传什么内容主要是看接口要传什么内容
        .then(function (response) {
          console.log(response);
          that.userList = response.data.data.records;
          that.pages = response.data.data.pages;
          that.total = response.data.data.total;
          // 因为上面有var that =this;所以这里用that来指数组，至于要怎么.data要看控制台传过来的服务器有几层
        });
    },
  },
};
</script>

<style>
.usermange {
  margin: 30px;
  font-size: 25px;
}
.rightnr {
  text-align: right;
  height: 40px;
  background-color: #f3f3f3;
  width: 100%;
}
</style>