zhensolid
/
Python-100-Days


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
							<!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>