参考 资料/页面原型/tlias智能学习辅助系统/首页.html 文件，浏览器打开，点击页面中的左侧栏的员工管理，如下所示：
需求说明：
-
制作类似格式的页面
即上面是标题，左侧栏是导航，右侧是数据展示区域
-
右侧需要展示搜索表单
-
右侧表格数据是动态展示的，数据来自于后台
-
实际示例效果如下图所示
大致步骤（口述）
- 用vue ui界面创建前端vue工程
- 在views目录下创建 tlias/EmpView.vue这个vue组件，并编写模板template,script,style
- 在App.vue里面引入emp-view这个组件
- 在使用ElementUI官网的组件之前，npm i element-ui 命令导入依赖，并在main.js中import
- 来到ElementUI的官网，找到布局组件，Header,Aside,Main
- 自己修改相关样式，并编写内容。就是在ElmentUI官网找自己需要的组件，复制，粘贴，修改
- 完成表格编写，表单编写，分页工具栏编写
- 异步数据加载，需要先安装axios: npm install axios 并在EmpView.vue的<script>里面import axios from 'axios'
- 使用mounted钩子函数响应数据赋值给数据模型
-
性别内容展示修复和图片内容展示修复
文件结构
App.vue
<template><div id="app"><emp-view></emp-view></div>
</template><script>
import EmpView from './views/tlias/EmpView.vue'
export default {components: { EmpView },data() {return {}}
}
</script><style></style>main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.config.productionTip = false
Vue.use(ElementUI)new Vue({router,render: h => h(App)
}).$mount('#app')
EmpView.vue
<template><div><!-- 设置最外层容器高度为700px,在加上一个很细的边框 --><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header><el-container><el-aside width="230px" style="border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1">部门管理</el-menu-item><el-menu-item index="1-2">员工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表单 --><el-form :inline="true" :model="searchForm" class="demo-form-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.gender" placeholder="性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入职日期"><el-date-pickerv-model="searchForm.entrydate"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="tableData"><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="image" label="图像" width="180"><template slot-scope="scope"><img :src="scope.row.image" width="100px" height="70px"></template></el-table-column><el-table-column prop="gender" label="性别" width="140"><template slot-scope="scope">{{scope.row.gender==1?"男":"女"}}</template></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column><el-table-column label="操作" ><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><!-- Pagination分页 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"backgroundlayout="sizes,prev, pager, next,jumper,total":total="1000"></el-pagination></el-main></el-container></el-container></div>
</template><script>
import axios from 'axios'
export default {data() {return {tableData: [],searchForm:{name:'张三',gender:'2',entrydate:[new Date("2023-01-01"),new Date("2023-02-15")]}}},methods:{onSubmit:function(){console.log(this.searchForm);},handleSizeChange(val) {console.log(`每页 ${val} 条`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);}},mounted(){axios.get("http://localhost:10010/emp/list").then(resp=>{this.tableData=resp.data.data;});}
}
</script><style></style>
注意事项：向后端请求数据模拟用方案二
