Element学习（布局组件、案例操作）（4）
1、页面整体的布局
2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）
<el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container> </el-container>
3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）
4、基本框架和一部分内容填写完之后展示效果
5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单
placeholder：表示输入框内的内容
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2
定义数据模型时，对象要使用大括号。像这里searchForm: {....}
- 还有一个当点击"查询"按钮时，会触发一个方法，也要去声明
6、日期选择器——>(官网中组件中找)
- 找到合适的，并进行修改
<el-form-item label="入职日期"><!-- 日期选择器 --><el-date-pickerv-model="searchForm.entrydate"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item>
- 注意绑定的数据模型："entrydate"是有两个值，所以下面声明的时候用数组
- 最终查询表单的效果如下
7、给表格增加一个边框——>加入border属性即可
<!-- 主体表格 --><el-table :data="tableData" border><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="image" label="图像" width="180"></el-table-column><el-table-column prop="gender" label="性别" width="140"></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydate" label="入职时间" width="140"></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>
8、最后加上分页组件之后的效果，但是并没有数据
