ant design vue 3 + JS 通用table组件
vue 2023-12-11 20:14:55

iShot_2023-12-11_21.26.32 (2).gif

上图为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个示例(菜单管理,角色管理)

27121702301872_.pic.jpg

 

本文来自于:http://www.yoyo88.cn/pay/vue/701.html

上一篇 返回列表
Powered by yoyo苏ICP备15045725号