vue3 列表hooks

useTable.js

// hooks/useTable.js
import { ref } from 'vue'export function useTable(pageService,options = {},pageKeys = { currentKey: 'current', sizeKey: 'size' }
) {const { currentKey, sizeKey } = pageKeys// 表格数据const tableData = ref([])// 加载状态const loading = ref(false)//筛选配置const searchForm = ref({ ...options.searchParams })// 分页配置const pagination = ref({[currentKey]: 1,[sizeKey]: 10,total: 0,...options.pagination})// 获取数据方法const fetchData = async () => {try {loading.value = trueconst { data } = await pageService({ ...searchForm.value, ...pagination.value })tableData.value = data.records || []pagination.value.total = data.total || 0} finally {loading.value = false}}//重置const resetQuery = () => {searchForm.value = { ...options.searchParams }pagination.value[currentKey] = 1fetchData()}// 分页变化处理const handlePageChange = (page) => {pagination.value[currentKey] = pagefetchData()}// 每页条数变化处理const handleSizeChange = (size) => {pagination.value[currentKey] = 1pagination.value[sizeKey] = sizefetchData()}return {tableData,loading,pagination,searchForm,resetQuery,fetchData,handlePageChange,handleSizeChange}
}

使用组件

<template><div class="dhcp-online main-page"><div class="search-container"><TableSearchv-model:query="searchForm"class="boxShadow-none":options="searchOptions":layout="4":search="fetchData":reset="resetQuery"/></div><div class="table-container boxShadow-none"><div class="table-toolbar boxShadow-none"><el-button @click="handleForm('add')" type="primary">新增</el-button></div><div class="table-box"><el-table:data="tableData"borderstyle="width: 100%":maxHeight="550"v-loading="loading"@selection-change="handleSelectionChange":tooltip-options="{ popperClass: 'table-tooltip' }"><el-table-columntype="selection"width="55"align="center":selectable="(row) => {return row.id != 1}"/><!-- <el-table-columnprop="id":label="$t('template.名称')"align="center"show-overflow-tooltipwidth="150"/> --><el-table-columnprop="pushRuleName"label="MAC地址"align="center"show-overflow-tooltipwidth="150"/><el-table-columnprop="pushRuleName"label="登录IPv4"align="center"show-overflow-tooltipwidth="150"/><el-table-columnprop="pushRuleName"label="所属地址池名称"align="center"show-overflow-tooltipwidth="150"/><el-table-columnprop="pushRuleName"label="VLAN"align="center"show-overflow-tooltipwidth="150"/><el-table-columnprop="pushRuleName"label="租用时间（秒）"align="center"show-overflow-tooltipwidth="150"/><el-table-columnprop="pushRuleName"label="已使用时间（秒)"align="center"show-overflow-tooltipwidth="150"/><el-table-columnprop="pushRuleName"label="最新上线时间"align="center"show-overflow-tooltipwidth="150"/><el-table-columnprop="pushRuleName"label="终端类型"align="center"show-overflow-tooltipwidth="150"/><el-table-columnprop="pushRuleName"label="厂商品牌"align="center"show-overflow-tooltipwidth="150"/><el-table-columnprop="pushRuleName"label="终端型号"align="center"show-overflow-tooltipwidth="150"/><el-table-column:label="$t('common.操作')"width="280"align="left"header-align="center"fixed="right"><template #default="scope"><el-buttonplainsize="small"icon="Edit"@click="handleForm('edit', scope.row.id)">{{ $t('common.编辑') }}</el-button></template></el-table-column></el-table></div><div class="page-box"><TablePage:currentPage="pagination.current":page-size="pagination.size":total="pagination.total"@size-change="handleSizeChange"@current-change="handlePageChange"/></div></div></div>
</template>
<script setup name="Ipv6List">
import TableSearch from '@/components/table/table-search.vue'
import accountService from '@/api/access/accountService'
import TablePage from '@/components/table/table-page.vue'import { useTable } from '@/hooks/useTable'
import { onMounted, ref } from 'vue'const {tableData,loading,pagination,searchForm,fetchData,resetQuery,handlePageChange,handleSizeChange
} = useTable(accountService.page, {searchParams: {userName: '',userIp: ''}
})const activeName = ref('IPV4')
const handleClick = () => {}// 查询表单配置
const searchOptions = ref([{type: 'input',label: 'mac.MAC',prop: 'userName',placeholder: 'mac.请输入MAC'},{type: 'input',label: 'authRecord.IP',prop: 'userIp',placeholder: 'authRecord.请输入IP'}
])
// const searchForm = ref({
//     startMac: '',
//     userIp: ''
// })
const handleSearch = () => {}// const loading = ref(false)
// const tableData = ref([])
const handleSelectionChange = () => {}onMounted(() => {fetchData()
})
</script>
<style scoped lang="scss"></style>