119 lines
2.7 KiB
Vue
119 lines
2.7 KiB
Vue
<script>
|
|
import {Delete, Edit, User} from "@element-plus/icons-vue";
|
|
|
|
|
|
export default {
|
|
name: "ZooUser",
|
|
computed: {
|
|
User() {
|
|
return User
|
|
},
|
|
Delete() {
|
|
return Delete
|
|
},
|
|
Edit() {
|
|
return Edit
|
|
},
|
|
usersFilter() {
|
|
let newusers = JSON.stringify(this.users)
|
|
newusers = JSON.parse(newusers)//深拷贝数组
|
|
// 计算格式化后的数组
|
|
newusers.forEach(e => {
|
|
if (e.auth === 0) {
|
|
e.auth = '管理员'
|
|
}
|
|
else if (e.auth === 1) {
|
|
e.auth = '饲养员'
|
|
}
|
|
else if (e.auth === 2) {
|
|
e.auth = '兽医'
|
|
}
|
|
})
|
|
return newusers
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
users: []
|
|
}
|
|
},
|
|
methods: {
|
|
editUser(user) {
|
|
console.log('编辑用户', user)
|
|
},
|
|
deleteUser(user) {
|
|
console.log('删除用户', user)
|
|
},
|
|
addUser() {
|
|
console.log('添加用户')
|
|
}
|
|
},
|
|
mounted() {
|
|
//数据生成器
|
|
for (let i = 0; i < 100; i++) {
|
|
let user = {
|
|
userKey: i,
|
|
username: 'user' + (i + 3),
|
|
password: '123456',
|
|
auth: Math.floor(Math.random() * 3),
|
|
}
|
|
this.users.push(user)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div id="root">
|
|
<div class="select">
|
|
<el-button type="primary" :icon="User" @click="addUser()">添加用户</el-button>
|
|
</div>
|
|
<hr/>
|
|
<div class="table">
|
|
<el-table :data="usersFilter" style="width: 100%;height: 90%">
|
|
<el-table-column fixed prop="username" label="用户名" width="150"/>
|
|
<el-table-column prop="password" label="密码" width="120"/>
|
|
<el-table-column prop="auth" label="身份" width="120"/>
|
|
<el-table-column prop="" label="占位置" width="700"/>
|
|
<el-table-column fixed="right" label="Operations" width="130">
|
|
<template #default="scope">
|
|
<el-button link type="primary" size="small" :icon="Edit" @click="editUser(scope.row)">
|
|
编辑
|
|
</el-button>
|
|
<el-button link type="danger" size="small" :icon="Delete" @click="deleteUser(scope.row)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.table {
|
|
/*width: 1300px;*/
|
|
height: 500px;
|
|
}
|
|
|
|
.select {
|
|
width: 100%;
|
|
height: 100px;
|
|
}
|
|
|
|
.el-table .warning-row {
|
|
--el-table-tr-bg-color: var(--el-color-warning-light-9);
|
|
}
|
|
|
|
.el-table .success-row {
|
|
--el-table-tr-bg-color: var(--el-color-success-light-9);
|
|
}
|
|
|
|
.el-table .info-row {
|
|
--el-table-tr-bg-color: var(--el-color-info-light-9);
|
|
}
|
|
|
|
.el-table .danger-row {
|
|
--el-table-tr-bg-color: var(--el-color-danger-light-9);
|
|
}
|
|
</style> |