公共Hooks封裝useTableData表格數(shù)據(jù)實(shí)例
更新時(shí)間：2022年12月01日 14:46:20 作者：JasonSubmara
這篇文章主要為大家介紹了公共Hooks封裝useTableData表格數(shù)據(jù)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
寫在前面
對(duì)于經(jīng)常需要開發(fā)企業(yè)管理后臺(tái)的前端開發(fā)來說，必不可少的需要使用表格對(duì)于數(shù)據(jù)進(jìn)行操作，在對(duì)于現(xiàn)有項(xiàng)目進(jìn)行代碼優(yōu)化時(shí)，封裝一些公共的Hooks.
本篇文章為useTableData.js
基于個(gè)人項(xiàng)目環(huán)境進(jìn)行封裝的Hooks，僅以本文介紹封裝Hooks思想心得，故相關(guān)代碼可能不適用他人
項(xiàng)目環(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全響應(yīng)式
const totalElements = ref(0); // 總數(shù)據(jù)量totalElements
無論是使用過Ant Design Vue 還是Element UI 亦或是其他UI FrameWork 框架，表格里需要的必定有tableData、totalElements。
封裝分解：請(qǐng)求接口
以下代碼僅解釋封裝思想
const getTableData = async() => {
***
const { data ||
data: { content, totalElements: total }
} = await API(QueryParams) // 請(qǐng)求接口，
***
tableData.value = data ||
data.content ||
data.content.map(item => {***}) //解構(gòu)data進(jìn)行賦值
totalElements.value = total
}
接口請(qǐng)求表格數(shù)據(jù)，最基礎(chǔ)的"增刪改查"之一，針對(duì)后端提供接口和相關(guān)代碼產(chǎn)出規(guī)范約定俗成后，封裝Hooks同時(shí)考慮，tableData是否能夠直接由data解構(gòu)的content賦值，或需要進(jìn)行二次處理
封裝分解：篩選查詢 及重置查詢
const search = async () => {
queryParams.value.pageIndex = 1; // 根據(jù)篩選想查詢數(shù)據(jù)，重置頁(yè)碼為1，調(diào)用接口
await getTableData();
};
const resetSearch = async () => {
if (isFunction(options.resetParams)) {
options.resetParams(); // 重置請(qǐng)求參數(shù)
await getTableData();
}
};
封裝分解：獲取分頁(yè)器配置
以下封裝基于項(xiàng)目環(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事件（分頁(yè)、排序、篩選變化觸發(fā)）
以下封裝基于項(xiàng)目環(huán)境Ant Design Vue 3.x
const onTableChange = async (page, _, sorter) => { // page: 頁(yè)碼, 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,
};
}
實(shí)際使用示例
// 頁(yè)面Page.vue
import { useQueryParams, useTableData } from '@/hooks';
import { dataList } from '@/services'
const {
tableData,
loading,
getTableData,
getPaginationOptions,
onTableChange,
search
} = useTableData(
dataList,
queryParams,
);
如此頁(yè)面只需要引入Hooks，和接口地址，即可完成單頁(yè)面數(shù)據(jù)表格的查詢功能～ 算是個(gè)人理解意義下的“低代碼”～
以上就是公共Hooks封裝useTableData表格數(shù)據(jù)實(shí)例的詳細(xì)內(nèi)容，更多關(guān)于公共Hooks封裝useTableData的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue 導(dǎo)航菜單刷新狀態(tài)不消失,顯示對(duì)應(yīng)的路由界面操作
這篇文章主要介紹了vue 導(dǎo)航菜單刷新狀態(tài)不消失,顯示對(duì)應(yīng)的路由界面操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了Vue + Element UI圖片上傳控件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
vue項(xiàng)目使用axios封裝request請(qǐng)求的過程
這篇文章主要介紹了vue項(xiàng)目使用axios封裝request請(qǐng)求，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
vue解決刷新頁(yè)面時(shí)會(huì)出現(xiàn)變量閃爍的問題
這篇文章主要介紹了vue解決刷新頁(yè)面時(shí)會(huì)出現(xiàn)變量閃爍的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了Vue?如何關(guān)掉響應(yīng)式問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue實(shí)現(xiàn)路由跳轉(zhuǎn)的3種方式超詳細(xì)分解
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來實(shí)現(xiàn)路由跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)路由跳轉(zhuǎn)的3種方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)div單選多選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
vue中computed和watch的使用實(shí)例代碼解析
這篇文章主要介紹了vue中computed和watch的綜合運(yùn)用實(shí)例,主要需求是點(diǎn)擊按鈕實(shí)現(xiàn)天氣的切換效果結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
Vue異步更新機(jī)制及$nextTick原理的深入講解
最近在學(xué)習(xí)一些底層方面的知識(shí),所以想做個(gè)系列嘗試去聊聊這些比較復(fù)雜又很重要的知識(shí)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue異步更新機(jī)制及$nextTick原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要給大家介紹了關(guān)于VUE3引入html文件并傳值的相關(guān)資料,這是最近在項(xiàng)目中遇到了的一個(gè)需求,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07