公共Hooks封装useTableData表格数据实例

 更新时间:2022年12月2日 10:44  点击:760 作者:JasonSubmara

写在前面

对于经常需要开发企业管理后台的前端开发来说,必不可少的需要使用表格对于数据进行操作,在对于现有项目进行代码优化时,封装一些公共的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

[!--infotagslink--]

相关文章

  • 基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能

    这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23
  • 图文介绍c#封装方法

    在本篇内容里小编给大家分享的是关于c#使用封装方法以及相关知识点,对此有需要的朋友们可以学习下。...2020-06-25
  • 封装 axios+promise通用请求函数操作

    这篇文章主要介绍了封装 axios+promise通用请求函数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
  • Mybatis返回结果封装map过程解析

    这篇文章主要介绍了Mybatis返回结果封装map过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19
  • vue+element-ui表格封装tag标签使用插槽

    这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-19
  • 原生JS封装Ajax插件(同域、jsonp跨域)

    这篇文章主要为大家详细介绍了原生JS封装Ajax插件,为大家介绍不同域之间互相请求资源的跨域...2016-05-05
  • 一百多行代码实现react拖拽hooks

    这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
  • 如何通过Proxy实现JSBridge模块化封装

    这篇文章主要介绍了如何通过Proxy实现JSBridge模块化封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-23
  • vue 将多个过滤器封装到一个文件中的代码详解

    这篇文章主要介绍了vue 将多个过滤器封装到一个文件中实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2020-09-05
  • Vue封装全局过滤器Filters的步骤

    这篇文章主要介绍了Vue封装全局过滤器Filters的步骤,通过封装vue全局过滤器实现filters的统一管理。感兴趣的朋友可以了解下...2020-09-16
  • Vue封装全局toast组件的完整实例

    组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于Vue封装全局toast组件,需要的朋友可以参考下...2021-07-13
  • 利用unity代码C#封装为dll的步骤分享

    这篇文章主要给大家介绍了关于利用unity代码C#封装为dll的相关资料,文中通过图文将实现的方法介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
  • 简单理解JavaScript中的封装与继承特性

    这篇文章主要介绍了JavaScript中的封装与继承特性,封装与继承是基于对象编程概念中的基本特性,需要的朋友可以参考下...2016-03-22
  • vue3封装放大镜组件的实例代码

    这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
  • 原生js实现对Ajax的封装(仿jquery)

    这篇文章主要为大家详细介绍了原生js实现对Ajax的封装,模仿jquery,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-26
  • React Hooks常用场景的使用(小结)

    这篇文章主要介绍了React Hooks常用场景的使用,根据使用场景分别进行举例说明,帮助你认识理解并可以熟练运用 React Hooks 大部分特性,感兴趣的可以了解一下...2021-04-13
  • WebService 的简单封装接口调用方法

    这篇文章主要介绍了WebService 的简单封装接口调用方法,主要是通过简单的sql语句来查询数据库,从而返回dataset,十分简单实用,有需要的小伙伴可以参考下。...2020-06-25
  • js实现对ajax请求面向对象的封装

    这篇文章主要介绍了js实现对ajax请求面向对象的封装的相关资料,需要的朋友可以参考下...2016-01-12
  • vue 封装面包屑组件教程

    这篇文章主要介绍了vue 封装面包屑组件教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16
  • 详解如何使用React Hooks请求数据并渲染

    这篇文章主要介绍了如何使用React Hooks请求数据并渲染,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-18