useTable表格hooks封装和使用(Vue3)

21,278 阅读1分钟

表格是中后台频繁使用的组件,vue3提供了hooks写法能够大大减少代码量和提高复用性,以下是一个基于arco design vue组件库封装的表格hooks:useTable

这个hooks相比于其他表格hooks的优点:

  • apiapi 参数 不分离,不会破坏原有的接口api
  • api参数 能够在外面进行过滤
  • 分页参数 pagin: { page, size } 能够按需使用

usePagination 的封装

code.png

useTable 的封装

useTable.png

文档

api参数

名称说明
api(pagin)表格数据接口api,pagin: {page, size}

options参数

参数说明
formatResult结果数据集过滤
onSuccess数据请求成功回调
immediate是否立即触发请求(默认true)
rowKey表格的数据rowKey

useTable 的使用

useTableDemo.png

使用useTable的时候不传入类型,tableData也会根据入参自动推导出类型

1726813966414.jpg

后续新增删除功能

code.png

02.png

演示效果

20231107195610_rec_.gif

来源

如遇接口请求出错,请使用浏览器打开预览

Gi Admin Pro

其他文章

vue3 模板使用 tsx 技巧

vue3 配合 tsx 优雅的弹窗方案

Form表单组件封装和使用(Vue3)

Element Plus 对比 Arco Design