公共Hooks封装useTableData表格数据实例
写在前面
对于经常需要开发企业管理后台的前端开发来说,必不可少的需要使用表格对于数据进行操作,在对于现有项目进行代码优化时,封装一些公共的Hooks.
本篇文章为useTableData.js
基于个人项目环境进行封装的Hooks,仅以本文介绍封装Hooks思想心得,故相关代码可能不适用他人
项目环境
Vue3.x + Ant Design Vue3.x + Vite3.x
封装分解:声明变量
import { ref, shallowRef, isRef } from 'vue'; const loading = ref(false); // 表格数据UI交互Loading const tableData = shallowRef([]); // 表格数据ShallowRef全响应式 const totalElements = ref(0); // 总数据量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 => {***}) //解构data进行赋值 totalElements.value = total }
接口请求表格数据,最基础的"增删改查"之一,针对后端提供接口和相关代码产出规范约定俗成后,封装Hooks同时考虑,tableData是否能够直接由data解构的content赋值,或需要进行二次处理
封装分解:筛选查询 及重置查询
const search = async () => { queryParams.value.pageIndex = 1; // 根据筛选想查询数据,重置页码为1,调用接口 await getTableData(); }; const resetSearch = async () => { if (isFunction(options.resetParams)) { options.resetParams(); // 重置请求参数 await getTableData(); } };
封装分解:获取分页器配置
以下封装基于项目环境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} 条数据`, }; };
封装分解:表格change事件(分页、排序、筛选变化触发)
以下封装基于项目环境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 参数必修为 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} 条数据`, }; }; 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,和接口地址,即可完成单页面数据表格的查询功能~ 算是个人理解意义下的“低代码”~
以上就是公共Hooks封装useTableData表格数据实例的详细内容,更多关于公共Hooks封装useTableData的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7171784482804989959
相关文章
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 在本篇内容里小编给大家分享的是关于c#使用封装方法以及相关知识点,对此有需要的朋友们可以学习下。...2020-06-25
- 这篇文章主要介绍了封装 axios+promise通用请求函数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- 这篇文章主要介绍了Mybatis返回结果封装map过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19
- 这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-19
- 这篇文章主要为大家详细介绍了原生JS封装Ajax插件,为大家介绍不同域之间互相请求资源的跨域...2016-05-05
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- 这篇文章主要介绍了如何通过Proxy实现JSBridge模块化封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-23
- 这篇文章主要介绍了vue 将多个过滤器封装到一个文件中实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2020-09-05
- 这篇文章主要介绍了Vue封装全局过滤器Filters的步骤,通过封装vue全局过滤器实现filters的统一管理。感兴趣的朋友可以了解下...2020-09-16
- 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于Vue封装全局toast组件,需要的朋友可以参考下...2021-07-13
- 这篇文章主要给大家介绍了关于利用unity代码C#封装为dll的相关资料,文中通过图文将实现的方法介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了JavaScript中的封装与继承特性,封装与继承是基于对象编程概念中的基本特性,需要的朋友可以参考下...2016-03-22
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要为大家详细介绍了原生js实现对Ajax的封装,模仿jquery,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-26
- 这篇文章主要介绍了React Hooks常用场景的使用,根据使用场景分别进行举例说明,帮助你认识理解并可以熟练运用 React Hooks 大部分特性,感兴趣的可以了解一下...2021-04-13
- 这篇文章主要介绍了WebService 的简单封装接口调用方法,主要是通过简单的sql语句来查询数据库,从而返回dataset,十分简单实用,有需要的小伙伴可以参考下。...2020-06-25
- 这篇文章主要介绍了js实现对ajax请求面向对象的封装的相关资料,需要的朋友可以参考下...2016-01-12
- 这篇文章主要介绍了vue 封装面包屑组件教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16
- 这篇文章主要介绍了如何使用React Hooks请求数据并渲染,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-18