起初发现,我们业务中获取表格的方法都是一样的,不如抽取出来,封装一个,不然每个页面都是一样的逻辑。
1.创建一个公共的js文件
//如果自己的组件中没有全局引入的话,需要引入以下的代码:
import {reactive, toRefs,} from 'vue'
import { debounce } from 'lodash'
import { ElMessage } from 'element-plus'
//一般命名前缀是使用use
export const useTable = (apiUrl:any,searchParmas:any)=>{
// 首先定义存放数据的变量
const state = reactive({
loading: false, //加载状态
tableData:[], //存放表格数据
listQuery:reactive({ ...searchParmas, page: 1, limit: 20 }),
})
// 定义获取表格数据的方法
const loadList = ()=>{
state.loading = true
const params ={
...state.listQuery,
...searchParmas
}
try {
state.tableData = await apiUrl(params)
} finally{
state.loading = false
state.tableData = []
}
}
//分页切换方法
const pageChange = (val:number)=>{
state.listQuery.page = val
loadList()
}
//分页size切换方法
const sizeChange = (val:number)=>{
state.listQuery.limit = val
loadList()
}
// 定义搜索方法,使用防抖lodash
const searchData = debounce((loadList:any) => {
state.listQuery.page = 1
loadList();
}, 500)
//重置搜索条件
const resetSearch = ()=>{
state.listQuery = reactive({ ...searchParmas, page: 1, limit: 20 })
loadList()
}
return {
...toRefs(state),
loadList,
pageChange,
sizeChange,
searchData,
resetSearch
};
}
2.然后在对应的页面引入刚刚封装的文件
import { useTable } from '@/hooks/useTable';
// 引入接口Api
import { getCusList } from '@/api/modules/customer'
const searchParam = reactive({ keyword: '' })
// 使用自定义table hooks
const {
loadList, pageChange, sizeChange, searchData, resetSearch, loading,tableData,listQuery
} = useTable(getCusList, searchParam);
onMounted(()=>{
loadList()
})