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）：