vue3整合Element-Plus，极速上手。

条件分页查询：
?? ?需求分析：
?? ??? ?form表单
?? ??? ?Button按钮
?? ??? ?Table表格
?? ??? ?Pagination分页
?? ?页面布局：
?? ??? ?搜索表单：
?? ??? ??? ?如果表单封装的数据较多，建议绑定到一个对象中。
?? ??? ??? ?定义表单搜索接口：
?? ??? ??? ??? ?export interface SearchEmpModel {
??name: string, //姓名
??gender: string, //性别
??begin: string, //开始时间
??end: string, //结束时间
??date: string[] //时间范围
}

?? ??? ??? ?定义表单搜索对象：
?? ??? ??? ??? ?//搜索表单对象
let searchEmp = ref<SearchEmpModel>({
?? ?begin: '',?
?? ?end: '',?
?? ?date: [],?
?? ?name: '',
?? ?gender: ''
})?

?? ??? ??? ?watch监听：
?? ??? ??? ??? ?作用：
?? ??? ??? ??? ??? ?侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。
?? ??? ??? ??? ?用法：
?? ??? ??? ??? ??? ?1，导入watch函数
?? ??? ??? ??? ??? ??? ?import { ref, watch } from 'vue'
const a = ref<string>('')

?? ??? ??? ??? ??? ?2，执行watch函数，传入要监听的响应式数据（ref对象）和回调函数
?? ??? ??? ??? ??? ??? ?watch(a, (newVal , oldVal) => { //侦听a的变化
??console.log(`a的值为: newVal: ${newVal}, oldVal: ${oldVal}`);
})?

?? ??? ??? ??? ?侦听对象的单个属性：
?? ??? ??? ??? ??? ?import { ref, watch } from 'vue'
const user = ref({name:'', age:10})

?? ??? ??? ??? ??? ?watch( () => user.value.name , (newVal , oldVal) => { ?//侦听user对象中name的变化
??console.log(`a的值为: newVal: ${newVal}, oldVal: ${oldVal}`);
})
?? ??? ??? ??? ?侦听对象的全部属性：（深度侦听）
?? ??? ??? ??? ??? ?import { ref, watch } from 'vue'
const user = ref({name:'', age:10})

?? ??? ??? ??? ??? ?watch(user, (newVal , oldVal) => { ?//侦听user对象中的全部属性的变化
??console.log(`a的值为: newVal: ${newVal}, oldVal: ${oldVal}`);
}, {deep: true})?

?? ??? ??? ??? ??? ??? ?//监听searchEmp的date属性
watch(() => searchEmp.value.date, (newVal, oldVal) => {
??if(newVal) {
????searchEmp.value.begin = newVal[0]
????searchEmp.value.end = newVal[1]
??}else {
????searchEmp.value.begin = ''
????searchEmp.value.end = ''
??}
})

?? ??? ??? ??? ?第三个可选参数，常见两个选项：
?? ??? ??? ??? ??? ?deep（boolean）：是否深度侦听，默认浅层侦听。

?? ??? ??? ??? ??? ?immediate（boolean）：是否在侦听创建时立即触发回调函数。

?? ??? ?数据表格：
?? ??? ??? ?<el-table>标签
?? ??? ??? ??? ?首列显示复选框，需要把<el-table-column> 标签的type属性改为 selection
?? ??? ??? ??? ?在操作的那一列<el-table-column>，需要使用插槽，在这一列中定义<temlpate>
?? ??? ??? ? <el-pagination>标签
?? ??? ??? ??? ?1，绑定了三个属性：current-page（当前页码），current-size（每页显示的记录数），total（总共有多少条记录）
?? ??? ??? ??? ?2，绑定了两个方法：handleSizeChange（页面大小发生变化时触发），handleCurrentChange（当前页码发生变化时触发）
?? ??? ??? ??? ?3，动态绑定了:page-sizes属性，里面定义的是，下拉菜单每页显示的条数。
?? ??? ??? ??? ?4，layout属性，里面填写的是，分页条的各个功能，它们出现的位置或者，有多少个，就决定了，页面显示的效果。
?? ?页面交互：
?? ??? ?查询：
?? ??? ??? ?逻辑：点击查询按钮的时候，根据输入的条件进行参数分页查寻。
?? ??? ??? ?参数：此案例包含：name，gender，begin，end，page，pageSize
?? ??? ??? ?使用钩子函数，在页面加载完毕就要开始，调用查询的方法。
?? ??? ??? ?查询到的数据要赋值给，我们定义的table要展示的数据表格数组。
?? ??? ??? ?总记录数：要封装到分页参数对象里面的total属性中。
?? ??? ?清空：
?? ??? ??? ?逻辑：：点击清空时，清空搜索表单中表单项的内容，并再次查询最新数据。

?? ??? ?页码发生变化：
?? ??? ??? ?handleCurrentChange，方法里面定义一个参数，表示当前的页码。
?? ??? ?每页显示的记录数发生变化：
?? ??? ??? ?handleSizeChange，方法里面写一个参数，代表每页显示的记录数的变化。

新增员工：

修改员工：

删除员工：

登录认证：

打包部署（nginx）：
?