目录
概述
Form表单
Table表格
Pagination 分页
效果展示
完整代码
概述
在刚才制作出来的页面当中，上面项目的名称已制作好，左侧的菜单栏也已配置好。
接下来主要处理的是右侧主展示区域当中的组件编写。
在右侧的主展示区域，主要有 3 个组件。上方有一个表单组件，这个表单用来收集用户输入的查询条件。中间一块是一个表格，表格的下面是有一个分页条。
所以接下来，我们需要在表格的上面增加一个 Form 表单，在表格的下面增加一个分页条。而这个表单是在一行当中展示的。接下来，我们就参照 Element 所提供的组件进行改造。
Form表单
先打开 VS Code，看一下表单应放在哪个位置。
主展示区域是这个 el-main，这里已有一个 el-table 表格。刚才提到，在表格的上方应该有一个表单，所以应在这个表格的上方增加一个 Form 表单。我们打开 Element 的官网，找到表单的源代码拿来改造。
之前提到过，行内表单是指将表单项放在一行当中展示，这正是我们需要的。此时直接点击显示代码，将里面的代码用 Ctrl+C 复制，在相应位置 Ctrl+V 粘贴过来，对格式稍微做规整即可。
复制过来的这个表单当中只有两个表单项和一个查询按钮，表单中的表单项数据绑定到一个数据模型叫做 formInline 当中，这个名字可读性不强，我们改造为 searchForm，所有表单项都绑定到 searchForm 这个对象当中。
上面通过 v-model 绑定了数据模型，这个数据模型必须在下面声明，它是一个对象，里面两个属性，一个是 name，一个是 gender。所以在下面，在数据模型当中定义这个对象，对象使用大括号，一个是 name 代表姓名，一个是 gender 代表性别。这样数据模型就定义好了。
然后再往上看，下面点击查询时会触发一个方法 onSubmit，接下来在下面定义一个 view 当中的方法 methods，在 methods 当中定义一个方法 onSubmit，点击提交时会触发这个方法，在这个方法中可以直接 alert 一个提示信息，代表要查询数据了。Form 表单的基本结构就准备好了。
接下来打开浏览器看效果，有两个表单项，一个姓名一个性别，性别是下拉框，有男有女。
接下来，表单中除了姓名性别，还有一个入职日期。这个表单项是入职日期，其体现形式不是输入框，而是日期选择器，这里不能再使用简单的 el-form，需要使用日期选择器。
还要绑定属性值：
这样，上面的表单就完善好了
Table表格
中间的表格部分，我们之前已制作好，可以再为表格加上一个边框，使其看起来更好看，在Table当中增加一个属性 border 即可。
Pagination 分页
接下来，在表格的下面增加一个分页条，在这个位置增加一个分页条，分页条之前用到过，可以直接将之前制作的分页条的内容用 Ctrl+C、Ctrl+V 复制过来，
里面还有两个方法需要复制过来，一个是 handleSizeChange，一个是 handleCurrentChange，直接复制过来，在最下面粘贴即可。
效果展示
接下来再次打开浏览器，会看到上面的表单、中间的表格以及下面的分页条已经展示出来。
表格和分页条之间比较拥挤，可以在中间加上一个简单的换行解决这个问题。
由于当前表格中没有数据，所以会展示在一起，等将数据动态加载返回后，就不会存在这个问题了。这就是第二步操作，完成各个部分的组件实现。
完整代码
项目内部文件：EmpView.vue
<template>
<div>
<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="200px">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1" style="background-color: rgb(215, 215, 215)">
<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>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
<el-form-item label="入职日期">
<el-date-picker
v-model="searchForm.entryDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-form>
<!-- 表格 -->
<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="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>
<br />
<!-- 分页条 -->
<el-pagination
background
layout="total,sizes,prev, pager, next,jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="1000">
</el-pagination>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
searchForm: {
name: "",
gender: "",
entryDate: [],
},
};
},
methods: {
onSubmit: function () {
alert("查询数据");
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
},
};
</script>
<style>
</style>
END
学习自：黑马程序员——JavaWeb课程
