【框架】表格组件
描述
基于antdesign UI a-table二次封装的列表组件
使用方法
基本使用方法和a-table相似,具体看下面代码示例
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38<template> <Table :columns="Table.columns" :querys="Table.querys" :load="Table.loadData" auto > <!--> 这里slot插槽同a-table <--> </Table> </template> <script> import Table from "@/components/Table";//引用组件 import { GetList } from "@/config/data";//引用接口 export default { ...//省略无关代码 data(){ return { Table:{ columns:[],//表头设置,同a-table querys:{},//这里是筛选查询条件属性 loadData(filters) {//请求接口设置 return GetList(filters).then((res) => { return { items: res.items, //数据数组 total: res.total, //总数 }; }); }, } } } ...//省略无关代码 } </script>
请求接口要求
1.必要参数 page(请求第几页)、pageSize(请求每页数量)
2.必要数据 items(返回数据数组)、total(数组总数)
组件API
columns【Array】(必要参数) 同a-table
querys 【Object】(必要参数)
其属性值作为接口的筛选参数(不包括page和pageSize),若无筛选,则为{}
load【function】(必要参数)
调用接口返回一个Promise对象 ,Promise返回的数据格式{items[Array],total[Number]}
auto 【Boolean】(可选参数)
querys的值改变后,组件内部是否自动调起接口进行查询(0.5s的防抖),默认false
若auto值为false,在修改完querys里的属性值后用ref的方式调用组件内的方法loadData来获取数据
占用API
此组件是对a-table的二次封装,因此api用法请参考a-table的api,但因为封装,如下api已被占用,无法修改
占用api:rowKey、loading、pagination、dataSource
相关地址
a-table文档:https://2x.antdv.com/components/table-cn/
最后
以上就是健康网络最近收集整理的关于【框架】表格组件【框架】表格组件的全部内容,更多相关【框架】表格组件【框架】表格组件内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复