当前位置：首页 > news >正文

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

news 来源：原创 2024/5/12 5:48:31

条件分页查询：
   需求分析：
       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属性中。
       清空：
           逻辑：：点击清空时，清空搜索表单中表单项的内容，并再次查询最新数据。