暑期项目实训记录-7

今日目标：

1、实现在网页未被渲染时即获取后台的用户数据

2、对活动选择的表单进行修改

3、实现点击某一行的按钮获取当前行的信息

工作详情：

1、实现在网页未被渲染时即获取后台的用户数据

了解creat()和mounted()的工作机制

creat是vue的一个生命周期钩子函数，在一个vue实例被创建之后调用，一般可以在created函数中调用ajax获取页面初始化所需的数据。

对于vue的生命周期进行了初步了解。也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。

关于creat和mounted的不同使用场景：

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

代码如下：

created() {
      this.$axios.get("http://grandland.gl-data.com:14332/manage/usermanage/getalluser")//向后端发送get请求
              .then((res) => {
                this.userData=res.data;
                console.log(this.userData);
              })
              .catch((err) => {
                console.log("failed");
              })
    },

实现效果，加载页面即可展示用户信息：

 2、对活动选择的表单进行修改

对于“全部”这个选项的设置：选择“全部”即可限制此用户的全部活动（包括此时已被创建的以及将来会被创建的）；选择“部分”则限制此用户不能参加当前已被创建的活动中的一个或几个，可通过复选框进行选择。

3、点击某一行按钮，获取当前行的信息

假如我想要删除第二行的数据，那么点击第二行对应的删除按钮，需要获取到当前行的信息，比如我需要的是用户id。

 实现代码：

<template slot-scope="scope">
          <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="del(scope.row.openid)">删除</el-button>
        </template>

scope.row即可得到当前行的所有属性的信息，如果想要特定的某一属性，比如每一行的信息有：openid，username，status等等，那么得到scope.row.openid即可得到用户的id