今日目标:
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