中国响应式网站建设,WordPress如何设置邮箱验证,湖南网站备案注销,微信平台开发公司条件分页查询#xff1a; 需求分析#xff1a; form表单 Button按钮 Table表格 Pagination分页 页面布局#xff1a; 搜索表单#xff1a; 如果表单封装的数据较多#xff0c;建议绑定到一个对象中。 …条件分页查询 需求分析 form表单 Button按钮 Table表格 Pagination分页 页面布局 搜索表单 如果表单封装的数据较多建议绑定到一个对象中。 定义表单搜索接口 export interface SearchEmpModel { name: string, //姓名 gender: string, //性别 begin: string, //开始时间 end: string, //结束时间 date: string[] //时间范围 } 定义表单搜索对象 //搜索表单对象 let searchEmp refSearchEmpModel({ begin: , end: , date: [], name: , gender: }) watch监听 作用 侦听一个或多个响应式数据源并在数据源变化时调用所给的回调函数。 用法 1导入watch函数 import { ref, watch } from vue const a refstring() 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 } }) 第三个可选参数常见两个选项 deepboolean是否深度侦听默认浅层侦听。 immediateboolean是否在侦听创建时立即触发回调函数。 数据表格 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属性里面定义的是下拉菜单每页显示的条数。 4layout属性里面填写的是分页条的各个功能它们出现的位置或者有多少个就决定了页面显示的效果。 页面交互 查询 逻辑点击查询按钮的时候根据输入的条件进行参数分页查寻。 参数此案例包含namegenderbeginendpagepageSize 使用钩子函数在页面加载完毕就要开始调用查询的方法。 查询到的数据要赋值给我们定义的table要展示的数据表格数组。 总记录数要封装到分页参数对象里面的total属性中。 清空 逻辑点击清空时清空搜索表单中表单项的内容并再次查询最新数据。 页码发生变化 handleCurrentChange方法里面定义一个参数表示当前的页码。 每页显示的记录数发生变化 handleSizeChange方法里面写一个参数代表每页显示的记录数的变化。
新增员工
修改员工
删除员工
登录认证
打包部署nginx
