Vue3基于element

2024-04-08 15:26| 来源: 网络整理| 查看: 265

发送网络请求

import zarkRequest from ".." export function getUserList(queryInfo: any) { return zarkRequest.post({ url:'/users/list', data: queryInfo }) }

在pinia中的逻辑

import { getUserList } from '@/servece/main/main' import { defineStore } from 'pinia' interface IMainState { userList: any[], totalCount: number } const useMainStore = defineStore('main', { state: ():IMainState => ({ userList: [], totalCount: 0 }), actions: { async featchUserList(queryInfo:any) { const res = await getUserList(queryInfo) const { totalCount, list } = res.data this.userList = list this.totalCount = totalCount } } }) export default useMainStore 当第一次进入页面时需要发送网络请求；当页码发生改变时需要发送网络请求；当每页显示条数发生改变时需要发送网络请求； import useMainStore from '@/stores/main'; import { storeToRefs } from 'pinia'; import { ref } from 'vue'; const currentPage = ref(1) const pageSize = ref(5) const mainStore = useMainStore() const {userList, totalCount} = storeToRefs(mainStore) //1 用于发送网络请求 function featchUserListData() { const size = pageSize.value const offset = (currentPage.value - 1) * size const info = { size,offset } mainStore.featchUserList(info) } //1-1第一次进入页面发送网络请求 featchUserListData() //1-2当每页显示条数发生改变时需要发送网络请求； const handleSizeChange = () => { //每页显示个数发生变化 console.log(pageSize.value); featchUserListData() } //1-3当页码发生改变时需要发送网络请求 const handleCurrentChange = () => { //页码发生变化 featchUserListData() console.log(currentPage.value); }

到以上为止，分页器的功能就实现了。

当分页器的数据涉及组件间的通信时：

Search.vue

重置查询 import { reactive, ref } from 'vue'; import type { ElForm, } from 'element-plus' const emit = defineEmits(['queryClick', 'resetClick']) const formRef = ref() const searchForm = reactive({ name: '', realname: '', cellphone: '', enable: '', createAt:'' }) const handlereset = () => { formRef.value?.resetFields() emit('resetClick') } const handelquery = () => { console.log(searchForm); emit('queryClick',searchForm) }

User.vue

import Search from "./cpns/search.vue"; import Content from "./cpns/content.vue"; import { ref } from "vue"; const contentRef = ref() const a:number = 1 const handelQueryClick = (searchFormData: any) => { contentRef.value?.handelqueryClick(searchFormData) } const handleResetClick = () => { contentRef.value?.handleResetClick() }

Content.vue

import useMainStore from '@/stores/main'; import { storeToRefs } from 'pinia'; import { ref } from 'vue'; let currentPage = ref(1) const pageSize = ref(5) const mainStore = useMainStore() const {userList, totalCount} = storeToRefs(mainStore) //1 用于发送网络请求 function featchUserListData(searchFormData:any = {}) { const size = pageSize.value const offset = (currentPage.value - 1) * size const info = { size,offset } mainStore.featchUserList({...info, ...searchFormData}) } //1-1第一次进入页面发送网络请求 featchUserListData() const handleSizeChange = () => { //每页显示个数发生变化 console.log(pageSize.value); featchUserListData() } const handleCurrentChange = () => { //页码发生变化 featchUserListData() console.log(currentPage.value); } //重置 function handleResetClick() { currentPage.value = 1 pageSize.value = 5 featchUserListData() } // 搜索过后current-page 绑定的数据变了，但是页面当前页码并没有变的问题 function handelqueryClick(searchFormData:any) { currentPage.value = 1 featchUserListData(searchFormData) } defineExpose({ handleResetClick, handelqueryClick })

【本文地址】

公司简介

联系我们