128 lines
2.9 KiB
HTML
128 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Vue入门</title>
|
|
<style>
|
|
/*
|
|
#emp {
|
|
border-collapse: collapse;
|
|
}
|
|
#emp td, #emp th {
|
|
border-bottom: 1px solid black;
|
|
width: 120px;
|
|
text-align: center;
|
|
}
|
|
*/
|
|
#page {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
/*
|
|
#page a {
|
|
text-decoration: none;
|
|
color: #67C23A;
|
|
cursor: pointer;
|
|
margin: 20px 20px;
|
|
}
|
|
*/
|
|
h1 {
|
|
color:#909399;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<h1>员工信息表</h1>
|
|
<hr>
|
|
<el-table v-loading="loading" :data="emps" stripe style="width: 100%">
|
|
<el-table-column prop="no" label="编号" width="180"></el-table-column>
|
|
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
|
|
<el-table-column prop="job" label="职位"></el-table-column>
|
|
<el-table-column prop="sal" label="工资"></el-table-column>
|
|
<el-table-column prop="comm" label="补贴"></el-table-column>
|
|
<el-table-column prop="dept.name" label="所在部门"></el-table-column>
|
|
</el-table>
|
|
<!--
|
|
<table id="emp">
|
|
<thead>
|
|
<tr>
|
|
<th>编号</th>
|
|
<th>姓名</th>
|
|
<th>职位</th>
|
|
<th>工资</th>
|
|
<th>补贴</th>
|
|
<th>所在部门</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="emp in emps">
|
|
<td>{{ emp.no }}</td>
|
|
<td>{{ emp.name }}</td>
|
|
<td>{{ emp.job }}</td>
|
|
<td>{{ emp.sal }}</td>
|
|
<td>{{ emp.comm }}</td>
|
|
<td>{{ emp.dept.name }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
-->
|
|
<div id="page">
|
|
<el-button type="primary" round @click="prevPage()">上一页</el-button>
|
|
<el-button type="primary" round @click="nextPage()">下一页</el-button>
|
|
</div>
|
|
</div>
|
|
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
<script>
|
|
let pageSize = 5
|
|
const app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
emps: [],
|
|
currentPage: 1,
|
|
totalPage: 0,
|
|
loading: true
|
|
},
|
|
created() {
|
|
this.getEmpData()
|
|
},
|
|
methods: {
|
|
getEmpData() {
|
|
this.loading = true
|
|
|
|
const url = `http://120.77.222.217/api/emps/?page=${this.currentPage}`
|
|
fetch(url, {
|
|
headers: {
|
|
"token": "35ad60445cea11e99e1000163e02b646",
|
|
}
|
|
})
|
|
.then(resp => resp.json())
|
|
.then(json => {
|
|
setTimeout(() => {
|
|
this.emps = json.results
|
|
this.totalPage = parseInt((json.count - 1) / pageSize) + 1
|
|
this.loading = false
|
|
}, 1000)
|
|
})
|
|
},
|
|
prevPage() {
|
|
if (this.currentPage > 1) {
|
|
this.currentPage -= 1
|
|
this.getEmpData()
|
|
}
|
|
},
|
|
nextPage() {
|
|
if (this.currentPage < this.totalPage) {
|
|
this.currentPage += 1
|
|
this.getEmpData()
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|