vxe-table官方版

vxe-table简介

vxe-table提供表格设计功能，可以作为表格组件使用。当需要向应用程序添加表函数时，可以使用该组件来设计表样式和表单样式。软件提供基本的表格编辑，支持大小、序号、列宽、换行、单元格工具提示、单元格溢出省略号、斑马纹、边框、圆角边框、单元格样式、单元格动态样式、动画。您可以自定义表单的所有内容，通过添加提供的表单组件可以快速创建新的表单，以满足大多数用户设计表单的需求，并且您可以通过vxe-table设计用于任何行业统计分析的表单！

vxe-table软件功能

图标

内置的轻量级css图标可以通过设置替换为字体图标，比如第三方图标库:font-awesome，in font。

按钮

标准按钮、文本按钮和下拉按钮可以使用任何第三方字体图标，如font-awesome、inconfont & # 8230

单个盒子

无线电盒、无线电祖先、无线电按钮

输入栏

输入框、选择器、查看应用编程接口

(注意:输入组件只能是字符串类型，其他类型要谨慎使用)

标页数

支持用户自定义分页，查看API，通过设置设置全局参数。

工具栏

工具栏模块，需要和表格结合使用，可以通过查看API设置全局参数。

菜单

通过设置形成、查看API和设置全局参数。

(注意:重置功能要求-render的键配置为有效，如果不需要自动重置，则无需设置。)

虚拟列表

高能虚拟列表(最大可以支持80w行)，用于根据需要将大数组切割成S个可见区域的数量，这样可以大大提高渲染，查看API。

(注意:容器高度和行高必须固定)

弹出窗口

灯光提示框，提示框，弹出窗口，检查API，通过设置设置全局参数。

对于某些场景，如果需要动态创建的窗口，可以通过以下API全局调用:

打印

高级打印，可以打印任意视图的HTML片段。

举一个该属的例子:

Vue.ptotype.$XPnt = VXETable.pnt

vxe-table软件特色

1.事件绑定:表格事件绑定，通过设置cell-click和cell-dbl click & # 8230；常见事件，例如

2.自定义模板:使用slot自定义模板；您可以自定义任何内容和html元素。

3.用v-for动态实现:不建议用v-for循环静态列，需要保证键是唯一的(动态场景需要用vxe-gd渲染)

4.自定义排序图标:更改图标，通过设置sort-config={iconAsc，iconDesc}部分替换默认图标

5.自定义列标题排序:自定义列标题排序的实现可以通过将表封装为子组件来定制，自定义排序可以通过槽来实现。通过设置showIcon，可以去掉内置的排序图标，比如第三方图标库:font-awesome和in font。

6.多字段组合排序:配置多选，启用多字段组合排序。如果是服务器端排序，只能通过增加sort-config.remote和sort-change事件来实现。

7.过滤高级用法:过滤高级用法，动态改变过滤条件，自定义更复杂的模板事件，通过调用setFilter和updateData方法处理复杂场景的过滤逻辑。

8.自定义滤镜图标:更改图标，通过设置filter-config = {IconMatch，IconMatch}部分替换默认图标，例如第三方图标库:font-awesome，in font。

9.自定义列标题过滤器:自定义过滤器，通过设置选项状态，调用updateData方法，可以更新过滤条件。

vxe-table使用说明

vxe-table基表，基于模板使用非常简单方便。

(注意:每一列中的字段不可更改)

使用突出显示-悬停-w属来启用悬停行突出显示

您可以设定尺寸:中/小/迷你

默认大小:表格48px，按钮34px，输入34px，复选框16px，单选16px，可通过scss变量修改。

将大小设置为中，默认大小为表格44px、按钮32px、输入32px、复选框15px和单选按钮15px。

通过tooltip-config.showAll打开全表工具提示还可以用contentMethod方法重写默认提示，完全自定义控件显示逻辑，返回null使用默认提示。

也可以通过title-设置标题的帮助信息。

当内容溢出时，显示为省略号、显示溢出、显示页眉溢出和显示页脚溢出。

当内容溢出时，省略号显示为省略号。

当内容溢出时，标题显示为省略号，并与原生标题一起显示。

当内容溢出时，工具提示显示为省略号，并与工具提示一起显示。

通过将contentMethod方法设置为覆盖默认的提示内容，显示逻辑是完全自定义的，可以返回null来使用默认的提示消息。

还可以通过可输入打开鼠标是否可以进入工具提示。

斑马线，通过设置stpe参数

(注意:不支持树形结构。在可编辑的表格场景中，临时插入的数据将不具有斑马图案)

行的动态样色、单元格的动态样式、表头的动态样式、表尾的动态样式可以通过设置单元格样式、表头单元格样式、w样式来设置& # 8230；相等参数

(注意:自定义样式后，表格的样式可能会被覆盖，例如选择行...等等。，记得自己处理相关风格)

当表格需要被父容器覆盖时，通过设置height=to，表格会根据父容器的高度自动被覆盖，但只有在数据重新加载时才会被计算。

还可以根据不同的场景添加sync-resize或to-resize，这样只需要通过样式控制父容器的高度就可以实现响应表。

您还可以设置相对于父容器的百分比。

设置为调整响应大小，以自动跟随父容器的宽度和高度的动态变化。

数据格式和字段

支持多种数据格式:默认标准结构、深度结构和2D数组。

深度结构，可用于结构复杂的场景(缺点:必须先定义深度数据类型，深度结构会影响性能，具体取决于数据量)

二维数组结构，适用场景较少(缺点和局限性比较大，需要手动指定w-id的唯一主键)