公共Hooks封裝useTableData表格數(shù)據(jù)實例
更新時間：2022年12月01日 14:46:20 作者：JasonSubmara
這篇文章主要為大家介紹了公共Hooks封裝useTableData表格數(shù)據(jù)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
寫在前面
對于經(jīng)常需要開發(fā)企業(yè)管理后臺的前端開發(fā)來說，必不可少的需要使用表格對于數(shù)據(jù)進行操作，在對于現(xiàn)有項目進行代碼優(yōu)化時，封裝一些公共的Hooks.
本篇文章為useTableData.js
基于個人項目環(huán)境進行封裝的Hooks，僅以本文介紹封裝Hooks思想心得，故相關代碼可能不適用他人
項目環(huán)境
Vue3.x + Ant Design Vue3.x + Vite3.x
封裝分解：聲明變量
import { ref, shallowRef, isRef } from 'vue';
const loading = ref(false); // 表格數(shù)據(jù)UI交互Loading
const tableData = shallowRef([]); // 表格數(shù)據(jù)ShallowRef全響應式
const totalElements = ref(0); // 總數(shù)據(jù)量totalElements
無論是使用過Ant Design Vue 還是Element UI 亦或是其他UI FrameWork 框架，表格里需要的必定有tableData、totalElements。
封裝分解：請求接口
以下代碼僅解釋封裝思想
const getTableData = async() => {
***
const { data ||
data: { content, totalElements: total }
} = await API(QueryParams) // 請求接口，
***
tableData.value = data ||
data.content ||
data.content.map(item => {***}) //解構(gòu)data進行賦值
totalElements.value = total
}
接口請求表格數(shù)據(jù)，最基礎的"增刪改查"之一，針對后端提供接口和相關代碼產(chǎn)出規(guī)范約定俗成后，封裝Hooks同時考慮，tableData是否能夠直接由data解構(gòu)的content賦值，或需要進行二次處理
封裝分解：篩選查詢 及重置查詢
const search = async () => {
queryParams.value.pageIndex = 1; // 根據(jù)篩選想查詢數(shù)據(jù)，重置頁碼為1，調(diào)用接口
await getTableData();
};
const resetSearch = async () => {
if (isFunction(options.resetParams)) {
options.resetParams(); // 重置請求參數(shù)
await getTableData();
}
};
封裝分解：獲取分頁器配置
以下封裝基于項目環(huán)境Ant Design Vue 3.x
const getPaginationOptions = () => {
return {
total: totalElements.value,
current: queryParams.value.pageIndex,
pageSize: queryParams.value.pageSize,
showQuickJumper: true,
showSizeChanger: true,
showTotal: _total => `共 ${_total} 條數(shù)據(jù)`,
};
};
封裝分解：表格change事件（分頁、排序、篩選變化觸發(fā)）
以下封裝基于項目環(huán)境Ant Design Vue 3.x
const onTableChange = async (page, _, sorter) => { // page: 頁碼, sorter: 排序字段
queryParams.value.pageIndex = page.current || 1;
queryParams.value.pageSize = page.pageSize || 10;
if (sorter && Object.keys(sorter).length > 0) {
if (sorter.order) {
queryParams.value.orderBy = sorter.field; // asc \ desc
queryParams.value.direction = sorter.order.slice(0, -3);
} else {
queryParams.value.orderBy = '';
queryParams.value.direction = '';
}
}
await getTableData();
};
useTableData.js完整代碼
import { ref, shallowRef, isRef } from 'vue';
import { isFunction } from 'lodash-es';
export function useTableData(apiInterface, queryParams, options = {}) {
if (!isRef(queryParams)) throw new Error('queryParams 參數(shù)必修為 Ref 類型');
const loading = ref(false);
const tableData = shallowRef([]);
const totalElements = ref(0);
const getTableData = async () => {
try {
loading.value = true;
const {
data: { content, totalElements: total },
} = await apiInterface(queryParams.value);
if (isFunction(options.handleContent)) {
tableData.value = content.map(options.handleContent);
} else {
tableData.value = content;
}
if (isFunction(options.callback)) {
options.callback(content);
}
totalElements.value = total;
} finally {
loading.value = false;
}
};
const onTableChange = async (page, _, sorter) => {
queryParams.value.pageIndex = page.current || 1;
queryParams.value.pageSize = page.pageSize || 10;
if (sorter && Object.keys(sorter).length > 0) {
if (sorter.order) {
queryParams.value.orderBy = sorter.field;
queryParams.value.direction = sorter.order.slice(0, -3);
} else {
queryParams.value.orderBy = '';
queryParams.value.direction = '';
}
}
await getTableData();
};
const search = async () => {
queryParams.value.pageIndex = 1;
await getTableData();
};
const resetSearch = async () => {
if (isFunction(options.resetParams)) {
options.resetParams();
await getTableData();
}
};
const getPaginationOptions = () => {
return {
total: totalElements.value,
current: queryParams.value.pageIndex,
pageSize: queryParams.value.pageSize,
showQuickJumper: true,
showSizeChanger: true,
showTotal: _total => `共 ${_total} 條數(shù)據(jù)`,
};
};
return {
loading,
totalElements,
tableData,
search,
resetSearch,
getPaginationOptions,
getTableData,
onTableChange,
};
}
實際使用示例
// 頁面Page.vue
import { useQueryParams, useTableData } from '@/hooks';
import { dataList } from '@/services'
const {
tableData,
loading,
getTableData,
getPaginationOptions,
onTableChange,
search
} = useTableData(
dataList,
queryParams,
);
如此頁面只需要引入Hooks，和接口地址，即可完成單頁面數(shù)據(jù)表格的查詢功能～ 算是個人理解意義下的“低代碼”～
以上就是公共Hooks封裝useTableData表格數(shù)據(jù)實例的詳細內(nèi)容，更多關于公共Hooks封裝useTableData的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Vue?+?Element?自定義上傳封面組件，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01
vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案
vite+vue3項目發(fā)布后,瀏覽器上還是舊代碼,沒有及時更新到最新代碼,下面通過本文給大家分享vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案,感興趣的朋友一起看看吧2024-06-06
這篇文章主要給大家介紹了關于vue中跳轉(zhuǎn)界面的3種實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了如何用命令窗口的方式創(chuàng)建Vue項目過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細講解
這篇文章主要介紹了Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-01-01
Vue是一套用于構(gòu)建用戶界面的漸進式框架,下面這篇文章主要給大家介紹了關于Vue語法和標簽使用的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue-route路由管理的安裝與配置,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-07-07
這篇文章主要給大家介紹了關于Vue開發(fā)實踐指南之應用入口的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-01-01
關于el-form表單驗證中的validator與validate使用時的問題
這篇文章主要介紹了關于el-form表單驗證中的validator與validate使用時的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue對依賴的管理使用的是發(fā)布訂閱者模式，其中watcher扮演訂閱者，Dep扮演發(fā)布者。所以dep中會有多個watcher，一個訂閱者也可以有多個發(fā)布者(依賴)。總共三個過程：定義依賴、收集依賴、觸發(fā)依賴。下面開始詳細講解三個過程2022-10-10