24kycj
87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
<template>
|
|
<div class="container_box">
|
|
<!-- 头部 -->
|
|
<tab-bar :active="2"></tab-bar>
|
|
<div class="table_box">
|
|
<el-table :data="userList">
|
|
<el-table-column prop="ID" label="序号"></el-table-column>
|
|
<el-table-column prop="userName" label="用户名"></el-table-column>
|
|
<el-table-column prop="role" label="用户组"></el-table-column>
|
|
<el-table-column prop="logintime" label="最后登录时间"></el-table-column>
|
|
<el-table-column prop="status" label="状态">
|
|
<template slot-scope="scope">
|
|
<div class="table_status" :class="{'table_status1': scope.row.status === 1}">{{ scope.row.status === 1 ? '在线' : '离线' }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import TabBar from '@/components/tabBar/tabBar.vue';
|
|
|
|
export default {
|
|
name: 'User',
|
|
components: { TabBar },
|
|
data() {
|
|
return {
|
|
userList: [
|
|
{
|
|
ID: '1',
|
|
userName: 'admin',
|
|
role: 'administrator',
|
|
logintime: '2024-10-06 18:12:10',
|
|
status: 1
|
|
},
|
|
{
|
|
ID: '2',
|
|
userName: '测试',
|
|
role: 'test',
|
|
logintime: '2024-10-05 19:06:45',
|
|
status: 0
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['name', 'roles'])
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
.container_box {
|
|
height: 100vh;
|
|
.table_box {
|
|
padding: 32px;
|
|
.el-table {
|
|
::v-deep {
|
|
th.el-table__cell {
|
|
background-color: #F2F9F4;
|
|
}
|
|
.el-table__cell {
|
|
padding: 6px 0;
|
|
}
|
|
.cell {
|
|
line-height: 28px;
|
|
font-size: 12px;
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
.table_status {
|
|
font-weight: 500;
|
|
color: #000000;
|
|
}
|
|
.table_status1 {
|
|
color: #00C325;
|
|
}
|
|
}
|
|
}
|
|
</style>
|