<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工列表页</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
.el-form,
.el-table,
.el-pagination {
width: 1300px;
margin: 0 auto;
}
h1 {
text-align: center;
}
</style>
<body>
<div id="app" >
<h1>职员列表</h1>
<div class="search-bar">
<el-form :model="searchForm" label-width="100px" inline>
<el-form-item label="员工姓名">
<el-input v-model="searchForm.name" placeholder="请输入员工姓名"></el-input>
</el-form-item>
<el-form-item label="所在部门">
<el-select v-model="searchForm.deptment" placeholder="">
<el-option label="研发部" :value="1" ></el-option>
<el-option label="人事部" :value="2" ></el-option>
<el-option label="后勤部" :value="3" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="员工状态">
<el-select v-model="searchForm.status" placeholder="">
<el-option label="在职" :value="1" ></el-option>
<el-option label="休假" :value="2" ></el-option>
<el-option label="离职" :value="0" ></el-option>
</el-select>
</el-form-item>
<el-form-item label="薪资">
<el-select v-model="searchForm.salaryRange" placeholder="">
<el-option label="1000-4999" :value="1000-5000" ></el-option>
<el-option label="5000-9999" :value="5000-9999" ></el-option>
<el-option label="10000-20000" :value="10000-20000" ></el-option>
<el-option label="20000以上" :value="20001-0" ></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData" :border="true" >
<el-table-column prop="id" label="员工ID"></el-table-column>
<el-table-column prop="name" label="员工姓名"></el-table-column>
<el-table-column prop="entryTime" label="入职日期"></el-table-column>
<el-table-column prop="salary" label="薪资"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column prop="deptment" label="部门"></el-table-column>
<el-table-column label="查看详情">
<el-button>查看详情</el-button>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
:current-page="currentPage"
:total="total">
</el-pagination>
</div>
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
searchForm: {
id: 0,
name: '',
status: '',
salaryRange: ''
},
tableData: [
{ id: 1, name: '小白', entryTime: "2004-12-12",salary: 16000, status: "在职", deptment:"研发部" },
{ id: 2, name: '小黑', entryTime: "2003-09-18",salary: 12000, status: "离职", deptment:"人事部" },
{ id: 3, name: '小兰', entryTime: "2002-10-19",salary: 14000, status: "在职", deptment:"产品部" },
{ id: 4, name: '小花', entryTime: "2004-11-08",salary: 15000, status: "休假", deptment:"人事部" },
{ id: 5, name: '小吕', entryTime: "2014-10-28",salary: 12000, status: "在职", deptment:"研发部" },
],
currentPage: 1,
pageSize: 5,
total: 50
};
},
methods: {
// fetchData() {
// // 模拟从后端获取数据的过程
// setTimeout(() => {
// const start = (this.currentPage - 1) * this.pageSize;
// const end = start + this.pageSize;
// const data = [];
// for (let i = start; i < end; i++) {
// data.push({
// id: i + 1,
// name: `商品 ${i + 1}`,
// price: (i + 1) * 10,
// stock: i + 10
// });
// }
// this.tableData = data;
// this.total = 100; // 假设一共有100条数据
// }, 500);
// },
handleSearch() {},
handleSizeChange(size) {
this.pageSize = size;
// this.fetchData();
},
handleCurrentChange(page) {
this.currentPage = page;
// this.fetchData();
}
},
mounted() {
// this.fetchData();
}
}
);
</script>
</body>
</html>
P10-A卷静态页面.zip
需积分: 0 113 浏览量
2023-08-18
08:16:35
上传
评论
收藏 425KB ZIP 举报
P10-A卷静态页面.zip （10个子文件） 
P10-A卷静态页面 
emp.html 3KB
.DS_Store 6KB empList.html 5KB js axios.min.js 14KB vue.min.js 91KB deptmentList.html 4KB P10-A卷图片 
4、职员列表图.png 140KB 1、部门列表图.png 94KB 3、职员详细信息图2.png 105KB 2、职员详细信息图.png 100KB资源评论
