Vue DevExtreme

---

theme: cyanosis

一、环境搭建

地址： Vue DevExtreme 环境搭建 - 掘金 (juejin.cn)

二、组件

参考： DataGrid入门：DevExtreme - DevExpress 的 Angular、React、Vue 和 jQuery 的 JavaScript UI 组件

2.1 DataGrid

可以使用 DataGrid 组件显示和编辑对象数组中的数据。使用 dataSource 和 keyExpr 属性指定绑定数组及其键字段。有关详细信息，请参阅以下帮助主题：本地数组。

使用 columns 属性可以指定要在 DataGrid 中显示为列的数据字段列表。如果未指定 columns 属性，则组件将为绑定数组中的对象中可用的所有数据字段创建列。

2.1.1 演示

在线地址：Simple Array - DevExtreme Data Grid - CodeSandbox

```

```

2.1.2 参数说明

① 数据绑定

若要使用本地数据，请将其分配给 dataSource 属性，并在 keyExpr 属性中指定键字段。

② 自定义列

若要自定义网格列，请声明列数组。此数组可以包含对象(列配置)或文本字符串(数据字段名称)。如果不需要指定除 dataField 之外的列属性，则可以使用文本字符串。

```

```

更多参数参考：

Column Chooser - DevExtreme Tree List: Vue Components by DevExpress

文档：DevExtreme - JavaScript 数据网格配置 (devexpress.com)

2.2 Pager

2.2.1 演示

在线地址：charming-wu-vfdxdh - CodeSandbox

```

Options

`` 核心代码`：

2.2.2 参数说明

数据网格将记录拆分为多个页面。此技术有助于优化控件性能：客户端一次只需加载和呈现一个页面。用户可以使用滚动条或分页器在页面之间导航。

分页器在分页器对象中配置，包含以下元素：

• 页面导航器
  启用页面导航。
• 页面大小选择器
  更改页面大小。若要显示此元素，请启用 showPageSizeSelector 属性。您还可以定义允许的页面大小，并在分页对象中指定初始页面大小。
• 页面信息
  显示当前页码和总记录数。若要显示页面信息，请启用 showInfo 属性。还可以使用 infoText 属性自定义信息文本字符串。

分页器支持完整、紧凑和自适应(默认)显示模式。在紧凑模式下，分页器会更改页面导航器和页面选择器的外观，以更有效地使用屏幕空间。在自适应模式下，分页器会根据 DataGrid 的宽度自动在完整模式和紧凑模式之间进行选择。使用 displayMode 属性在模式之间切换。

在此演示中，您可以使用下拉显示模式菜单在完整显示模式和紧凑显示模式之间切换。您还可以使用复选框隐藏或显示不同的分页器元素。请注意，当分页器处于紧凑模式时，导航按钮始终可见。

参考地址：

Documentation: DevExtreme - JavaScript Data Grid Pager (devexpress.com)

Record Paging - DevExtreme Data Grid: Vue Components by DevExpress

2.3 Pivot Grid

2.3.1 演示

在线地址： Overview - DevExtreme Pivot Grid - CodeSandbox

```

<DxPivotGrid
  id="pivotgrid"
  ref="grid"
  :data-source="dataSource"
  :allow-sorting-by-summary="true"
  :allow-filtering="true"
  :show-borders="true"
  :show-column-grand-totals="false"
  :show-row-grand-totals="false"
  :show-row-totals="false"
  :show-column-totals="false"
>
  <DxFieldChooser
    :enabled="true"
    :height="400"
  />
</DxPivotGrid>

pivotgrid {

margin-top: 20px; }

.currency { text-align: center; }

```

2.3.2 参数说明

参考地址： PivotGrid入门：DevExtreme - DevExpress 的 Angular、React、Vue 和 jQuery 的 JavaScript UI 组件