<template>
<div class="about">
<!-- 搜索框 -->
<header>
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"
clearable
style="height:40px;width:200px"
/>
</header>
<el-table
:data="list.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))
"
border
style="width: 100%"
>
<el-table-column type="index"></el-table-column>
<el-table-column label="姓名" prop="username"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column property="mobile" label="电话"></el-table-column>
<el-table-column property="role_name" label="角色"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-switch
v-model="scope.row.mg_state"
active-color="#13ce66"
inactive-color="#ff4949"
@change="change(scope.row.mg_state,scope.row.id)"
></el-switch>
</template>
</el-table-column>
<el-table-column prop="address" label="操作">
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
</el-table-column>
</el-table>
<el-pagination
@current-change="currentchange"
@size-change="handleSizeChange"
:current-page="1"
:page-sizes="[2, 4,]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="length"
></el-pagination>
</div>
</template>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
search: "",
length: 0,
};
},
mounted() {
this.$axios({
method: "get",
url: `https://www.liulongbin.top:8888/api/private/v1/users`,
headers: {
Authorization: localStorage.getItem("TOKEN"),
},
params: {
pagesize: 2,
pagenum: 1,
},
}).then((res) => {
this.list = res.data.data.users;
this.length = res.data.data.total;
console.log(res);
});
},
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
let token = localStorage.getItem("TOKEN") === null;
// console.log(token);
if (token) {
next({ path: "/" });
} else {
next();
}
},
methods: {
handleSizeChange(val) {
this.$axios({
method: "get",
url: `https://www.liulongbin.top:8888/api/private/v1/users`,
headers: {
Authorization: localStorage.getItem("TOKEN"),
},
params: {
pagesize: val,
pagenum: 1,
},
}).then((res) => {
this.list = res.data.data.users;
console.log(res);
});
},
// 分页器
currentchange(page) {
// console.log(page)
console.log(page);
this.$axios({
method: "get",
url: `https://www.liulongbin.top:8888/api/private/v1/users`,
headers: {
Authorization: localStorage.getItem("TOKEN"),
},
params: {
pagesize: 2,
pagenum: page,
},
}).then((res) => {
this.list = res.data.data.users;
console.log(res);
});
},
},
};
</script>
<style scoped>
header {
width: 80%;
display: flex;
justify-content: space-between;
}
</style>
使用axios获取token用户列表数据
最新推荐文章于 2022-10-18 15:58:54 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)