上图为s-table组件演示图
购买前请注意:
1、此组件基于 vue3 + ant design vue 4.0.7 + JS
2、组件的API如下,付费时请备注邮箱!!!!可第一时间发送,如果没有留邮箱,请一定一定一定要联系站长QQ:398927951,购买前请一定要先邮件给站长说明是哪个组件!!398927951@qq.com
3、代码为虚拟产品,不退不换
4、功能包含:
1)表格数据直接赋值
2)表格数据根据api地址自动加载
3)树结构支持初始化全部展示
4)树结构展开/收起事件
5)全选/全不选
6)勾选指定列名显示
7)打印当前页
8)excel导出当前表格
9)自定义拖拽表格列宽
10)发的包,单独拉出来s-table通用组件,同时有一个工程示例,yarn/npm install,直接运行即可
API
以下API也可以在组件的最上方查询:
apiObj ====> 远程数据API对象
params ====> 远程数据默认请求参数
loading ====> 页面是否加载中
columns ====> 表格列的配置描述
columnsDraggable ====> 表格列是否支持拖拽排序,默认为true
data ====> 数据数组
rowKey ====> 表格行 key 的取值,可以是字符串或一个函数
pagination ====> 分页器,参考配置项或 pagination文档,设为 false 时不展示和进行分页
scroll ====> 表格是否可滚动,也可以指定滚动区域的宽、高,可在文档查看配置项
size ====> 表格大小, large | middle | small
sticky ====> 设置粘性头部和滚动条,boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}
isResizeColumn ====> 是否开启伸缩列,如果开启的话,在columns的每列【必须加上with,且为number】否则不生效
lightIndex ====> 要高亮的行数据索引,支持数组,如[0,1]
isRowSelection ====> 是否允许勾选,默认为true
isExport ====> 是否需要导出,默认为false
isPrint ====> 是否需要打印,默认为false
defaultExpandAllRows => 初始时,是否展开所有行,默认false,当数据有children时生效
isShowTool ====> 是否显示右侧的工具按钮,默认为true
Event
dataChange ====> 数据加载完成后
selectionChange ====> 当选择项发生变化时会触发该事件
rowClick ====> 当点击了行事情,可以配合setRowLight实现行高亮
pageChange ====> 页码或 pageSize 改变的回调,参数是改变后的页码及每页条数
Methods
refresh ====> 刷新表格
upData ====> 更新表格(合并上一次params),参数:params, page
reload ====> 重载表格(替换params),参数:params, page
setRowLight ====> 设置当前行高亮
onExpand ====> 当是树列的时候,支持展开,入参:true/false
slot
headerCell ====> 自定义表头
bodyCell ====> 自定义数据列
安装方式
1、安装依赖
yarn add lodash.clonedeep
yarn add xlsx
yarn add vue3-print-nb
2、提供了component,以及view的2个示例(菜单管理,角色管理)