表格是中后台频繁使用的组件,vue3提供了hooks写法能够大大减少代码量和提高复用性,以下是一个基于arco design vue组件库封装的表格hooks:useTable
这个hooks相比于其他表格hooks的优点:
api
与api 参数
不分离,不会破坏原有的接口apiapi参数
能够在外面进行过滤- 分页参数
pagin: { page, size }
能够按需使用
usePagination 的封装
useTable 的封装
文档
api参数
名称 | 说明 |
---|---|
api(pagin) | 表格数据接口api,pagin: {page, size} |
options参数
参数 | 说明 |
---|---|
formatResult | 结果数据集过滤 |
onSuccess | 数据请求成功回调 |
immediate | 是否立即触发请求(默认true) |
rowKey | 表格的数据rowKey |
useTable 的使用
使用useTable的时候不传入类型,tableData也会根据入参自动推导出类型
后续新增删除功能
演示效果
来源
如遇接口请求出错,请使用浏览器打开预览