一、环境搭建
地址： 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
<template>
<DxDataGrid
:data-source="customers"
key-expr="ID"
:columns="columns"
:show-borders="true"
/>
</template>
<script setup lang="ts">
import DxDataGrid from 'devextreme-vue/data-grid';
const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
const customers = [{
ID: 1,
CompanyName: 'Super Mart of the West',
Address: '702 SW 8th Street',
City: 'Bentonville',
State: 'Arkansas',
Zipcode: 72716,
Phone: '(800) 555-2797',
Fax: '(800) 555-2171',
Website: 'http://www.nowebsitesupermart.com',
}, {
ID: 2,
CompanyName: 'Electronics Depot',
Address: '2455 Paces Ferry Road NW',
City: 'Atlanta',
State: 'Georgia',
Zipcode: 30339,
Phone: '(800) 595-3232',
Fax: '(800) 595-3231',
Website: 'http://www.nowebsitedepot.com',
}, {
ID: 3,
CompanyName: 'K&S Music',
Address: '1000 Nicllet Mall',
City: 'Minneapolis',
State: 'Minnesota',
Zipcode: 55403,
Phone: '(612) 304-6073',
Fax: '(612) 304-6074',
Website: 'http://www.nowebsitemusic.com',
}, {
ID: 4,
CompanyName: "Tom's Club",
Address: '999 Lake Drive',
City: 'Issaquah',
State: 'Washington',
Zipcode: 98027,
Phone: '(800) 955-2292',
Fax: '(800) 955-2293',
Website: 'http://www.nowebsitetomsclub.com',
}, {
ID: 5,
CompanyName: 'E-Mart',
Address: '3333 Beverly Rd',
City: 'Hoffman Estates',
State: 'Illinois',
Zipcode: 60179,
Phone: '(847) 286-2500',
Fax: '(847) 286-2501',
Website: 'http://www.nowebsiteemart.com',
}, {
ID: 6,
CompanyName: 'Walters',
Address: '200 Wilmot Rd',
City: 'Deerfield',
State: 'Illinois',
Zipcode: 60015,
Phone: '(847) 940-2500',
Fax: '(847) 940-2501',
Website: 'http://www.nowebsitewalters.com',
}, {
ID: 7,
CompanyName: 'StereoShack',
Address: '400 Commerce S',
City: 'Fort Worth',
State: 'Texas',
Zipcode: 76102,
Phone: '(817) 820-0741',
Fax: '(817) 820-0742',
Website: 'http://www.nowebsiteshack.com',
}, {
ID: 8,
CompanyName: 'Circuit Town',
Address: '2200 Kensington Court',
City: 'Oak Brook',
State: 'Illinois',
Zipcode: 60523,
Phone: '(800) 955-2929',
Fax: '(800) 955-9392',
Website: 'http://www.nowebsitecircuittown.com',
}, {
ID: 9,
CompanyName: 'Premier Buy',
Address: '7601 Penn Avenue South',
City: 'Richfield',
State: 'Minnesota',
Zipcode: 55423,
Phone: '(612) 291-1000',
Fax: '(612) 291-2001',
Website: 'http://www.nowebsitepremierbuy.com',
}, {
ID: 10,
CompanyName: 'ElectrixMax',
Address: '263 Shuman Blvd',
City: 'Naperville',
State: 'Illinois',
Zipcode: 60563,
Phone: '(630) 438-7800',
Fax: '(630) 438-7801',
Website: 'http://www.nowebsiteelectrixmax.com',
}, {
ID: 11,
CompanyName: 'Video Emporium',
Address: '1201 Elm Street',
City: 'Dallas',
State: 'Texas',
Zipcode: 75270,
Phone: '(214) 854-3000',
Fax: '(214) 854-3001',
Website: 'http://www.nowebsitevideoemporium.com',
}, {
ID: 12,
CompanyName: 'Screen Shop',
Address: '1000 Lowes Blvd',
City: 'Mooresville',
State: 'North Carolina',
Zipcode: 28117,
Phone: '(800) 445-6937',
Fax: '(800) 445-6938',
Website: 'http://www.nowebsitescreenshop.com',
}];
</script>
2.1.2 参数说明
① 数据绑定
若要使用本地数据，请将其分配给 dataSource 属性，并在 keyExpr 属性中指定键字段。
② 自定义列
若要自定义网格列，请声明列数组。此数组可以包含对象（列配置）或文本字符串（数据字段名称）。如果不需要指定除 dataField 之外的列属性，则可以使用文本字符串。
<template>
<DxDataGrid
:data-source="customers"
:allow-column-reordering="true">
<DxColumn data-field="ID"></DxColumn>
<DxColumn data-field="CompanyName"></DxColumn>
<DxColumn data-field="City" />
<DxColumn data-field="Address" />
<DxColumn data-field="Phone" />
<DxColumn data-field="Website" />
</DxDataGrid>
</template>
<script setup lang="ts">
import {
DxDataGrid,
DxColumn
} from 'devextreme-vue/data-grid';
const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
const customers = [{
ID: 1,
CompanyName: 'Super Mart of the West',
Address: '702 SW 8th Street',
City: 'Bentonville',
State: 'Arkansas',
Zipcode: 72716,
Phone: '(800) 555-2797',
Fax: '(800) 555-2171',
Website: 'http://www.nowebsitesupermart.com',
}, {
ID: 2,
CompanyName: 'Electronics Depot',
Address: '2455 Paces Ferry Road NW',
City: 'Atlanta',
State: 'Georgia',
Zipcode: 30339,
Phone: '(800) 595-3232',
Fax: '(800) 595-3231',
Website: 'http://www.nowebsitedepot.com',
}, {
ID: 3,
CompanyName: 'K&S Music',
Address: '1000 Nicllet Mall',
City: 'Minneapolis',
State: 'Minnesota',
Zipcode: 55403,
Phone: '(612) 304-6073',
Fax: '(612) 304-6074',
Website: 'http://www.nowebsitemusic.com',
}, {
ID: 4,
CompanyName: "Tom's Club",
Address: '999 Lake Drive',
City: 'Issaquah',
State: 'Washington',
Zipcode: 98027,
Phone: '(800) 955-2292',
Fax: '(800) 955-2293',
Website: 'http://www.nowebsitetomsclub.com',
}, {
ID: 5,
CompanyName: 'E-Mart',
Address: '3333 Beverly Rd',
City: 'Hoffman Estates',
State: 'Illinois',
Zipcode: 60179,
Phone: '(847) 286-2500',
Fax: '(847) 286-2501',
Website: 'http://www.nowebsiteemart.com',
}, {
ID: 6,
CompanyName: 'Walters',
Address: '200 Wilmot Rd',
City: 'Deerfield',
State: 'Illinois',
Zipcode: 60015,
Phone: '(847) 940-2500',
Fax: '(847) 940-2501',
Website: 'http://www.nowebsitewalters.com',
}, {
ID: 7,
CompanyName: 'StereoShack',
Address: '400 Commerce S',
City: 'Fort Worth',
State: 'Texas',
Zipcode: 76102,
Phone: '(817) 820-0741',
Fax: '(817) 820-0742',
Website: 'http://www.nowebsiteshack.com',
}, {
ID: 8,
CompanyName: 'Circuit Town',
Address: '2200 Kensington Court',
City: 'Oak Brook',
State: 'Illinois',
Zipcode: 60523,
Phone: '(800) 955-2929',
Fax: '(800) 955-9392',
Website: 'http://www.nowebsitecircuittown.com',
}, {
ID: 9,
CompanyName: 'Premier Buy',
Address: '7601 Penn Avenue South',
City: 'Richfield',
State: 'Minnesota',
Zipcode: 55423,
Phone: '(612) 291-1000',
Fax: '(612) 291-2001',
Website: 'http://www.nowebsitepremierbuy.com',
}, {
ID: 10,
CompanyName: 'ElectrixMax',
Address: '263 Shuman Blvd',
City: 'Naperville',
State: 'Illinois',
Zipcode: 60563,
Phone: '(630) 438-7800',
Fax: '(630) 438-7801',
Website: 'http://www.nowebsiteelectrixmax.com',
}, {
ID: 11,
CompanyName: 'Video Emporium',
Address: '1201 Elm Street',
City: 'Dallas',
State: 'Texas',
Zipcode: 75270,
Phone: '(214) 854-3000',
Fax: '(214) 854-3001',
Website: 'http://www.nowebsitevideoemporium.com',
}, {
ID: 12,
CompanyName: 'Screen Shop',
Address: '1000 Lowes Blvd',
City: 'Mooresville',
State: 'North Carolina',
Zipcode: 28117,
Phone: '(800) 445-6937',
Fax: '(800) 445-6938',
Website: 'http://www.nowebsitescreenshop.com',
}];
</script>
更多参数参考：
Column Chooser - DevExtreme Tree List: Vue Components by DevExpress
文档：DevExtreme - JavaScript 数据网格配置 (devexpress.com)
2.2 Pager
2.2.1 演示
在线地址：charming-wu-vfdxdh - CodeSandbox
<template>
<div>
<DxDataGrid
id="gridContainer"
:customize-columns="customizeColumns"
:data-source="dataSource"
key-expr="id"
:show-borders="true"
>
<DxScrolling row-rendering-mode="virtual"/>
<DxPaging :page-size="10"/>
<DxPager
:visible="true"
:allowed-page-sizes="pageSizes"
:display-mode="displayMode"
:show-page-size-selector="showPageSizeSelector"
:show-info="showInfo"
:show-navigation-buttons="showNavButtons"
/>
</DxDataGrid>
<div class="options">
<div class="caption">Options</div>
<div class="option-container">
<div class="option">
<DxSelectBox
id="dispalyModes"
:items="displayModes"
:input-attr="{ 'aria-label': 'Display Mode' }"
display-expr="text"
value-expr="value"
v-model:value="displayMode"
/>
</div>
<div class="option">
<DxCheckBox
id="showPageSizes"
text="Show Page Size Selector"
v-model:value="showPageSizeSelector"
/>
</div>
<div class="option">
<DxCheckBox
id="showInfo"
text="Show Info Text"
v-model:value="showInfo"
/>
</div>
<div class="option">
<DxCheckBox
id="showNavButtons"
text="Show Navigation Buttons"
:disabled="isCompactMode"
v-model:value="showNavButtons"
/>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import {
DxDataGrid,
DxScrolling,
DxPager,
DxPaging,
} from 'devextreme-vue/data-grid';
import DxSelectBox from 'devextreme-vue/select-box';
import DxCheckBox from 'devextreme-vue/check-box';
import { Column } from 'devextreme/ui/data_grid';
let s = 123456789;
function random() {
s = (1103515245 * s + 12345) % 2147483647;
return s % (10 - 1);
}
function generateData(count) {
let i;
const surnames = ['Smith', 'Johnson', 'Brown', 'Taylor', 'Anderson', 'Harris', 'Clark', 'Allen', 'Scott', 'Carter'];
const names = ['James', 'John', 'Robert', 'Christopher', 'George', 'Mary', 'Nancy', 'Sandra', 'Michelle', 'Betty'];
const gender = ['Male', 'Female'];
const items = [];
const startBirthDate = Date.parse('1/1/1975');
const endBirthDate = Date.parse('1/1/1992');
for (i = 0; i < count; i += 1) {
const birthDate = new Date(startBirthDate + Math.floor(
(random() * (endBirthDate - startBirthDate)) / 10,
));
birthDate.setHours(12);
const nameIndex = random();
const item = {
id: i + 1,
firstName: names[nameIndex],
lastName: surnames[random()],
gender: gender[Math.floor(nameIndex / 5)],
birthDate,
};
items.push(item);
}
return items;
}
const dataSource = generateData(100000);
const displayModes = [
{ text: 'Display Mode \'full\'', value: 'full' },
{ text: 'Display Mode \'compact\'', value: 'compact' },
];
const pageSizes = [5, 10, 'all'];
const displayMode = ref('full');
const showPageSizeSelector = ref(true);
const showInfo = ref(true);
const showNavButtons = ref(true);
const isCompactMode = computed(() => displayMode.value === 'compact');
const customizeColumns = (columns: Column[]) => {
columns[0].width = 70;
};
</script>
核心代码：
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
<template>
<div>
<DxChart ref="chart">
<DxTooltip
:enabled="true"
:customize-tooltip="customizeTooltip"
/>
<DxAdaptiveLayout :width="450"/>
<DxSize :height="200"/>
<DxCommonSeriesSettings type="bar"/>
</DxChart>
<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>
</div>
</template>
<script>
import {
DxChart,
DxAdaptiveLayout,
DxCommonSeriesSettings,
DxSize,
DxTooltip,
} from 'devextreme-vue/chart';
import {
DxPivotGrid,
DxFieldChooser,
} from 'devextreme-vue/pivot-grid';
const currencyFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
});
const sales = [{
id: 10248,
region: 'North America',
country: 'United States of America',
city: 'New York',
amount: 1740,
date: new Date('2013-01-06'),
}, {
id: 10249,
region: 'North America',
country: 'United States of America',
city: 'Los Angeles',
amount: 850,
date: new Date('2013-01-13'),
}, {
id: 10250,
region: 'North America',
country: 'United States of America',
city: 'Denver',
amount: 2235,
date: new Date('2013-01-07'),
}, {
id: 10251,
region: 'North America',
country: 'Canada',
city: 'Vancouver',
amount: 1965,
date: new Date('2013-01-03'),
}, {
id: 10252,
region: 'North America',
country: 'Canada',
city: 'Edmonton',
amount: 880,
date: new Date('2013-01-10'),
}, {
id: 10253,
region: 'South America',
country: 'Brazil',
city: 'Rio de Janeiro',
amount: 5260,
date: new Date('2013-01-17'),
}, {
id: 10254,
region: 'South America',
country: 'Argentina',
city: 'Buenos Aires',
amount: 2790,
date: new Date('2013-01-21'),
}, {
id: 10255,
region: 'South America',
country: 'Paraguay',
city: 'Asuncion',
amount: 3140,
date: new Date('2013-01-01'),
}, {
id: 10256,
region: 'Europe',
country: 'United Kingdom',
city: 'London',
amount: 6175,
date: new Date('2013-01-24'),
}, {
id: 10257,
region: 'Europe',
country: 'Germany',
city: 'Berlin',
amount: 4575,
date: new Date('2013-01-11'),
}, {
id: 10258,
region: 'Europe',
country: 'Spain',
city: 'Madrid',
amount: 3680,
date: new Date('2013-01-12'),
}, {
id: 10259,
region: 'Europe',
country: 'Russian Federation',
city: 'Moscow',
amount: 2260,
date: new Date('2013-01-01'),
}, {
id: 10260,
region: 'Asia',
country: 'China',
city: 'Beijing',
amount: 2910,
date: new Date('2013-01-26'),
}, {
id: 10261,
region: 'Asia',
country: 'Japan',
city: 'Tokyo',
amount: 8400,
date: new Date('2013-01-05'),
}, {
id: 10262,
region: 'Asia',
country: 'Republic of Korea',
city: 'Seoul',
amount: 1325,
date: new Date('2013-01-14'),
}, {
id: 10263,
region: 'Australia',
country: 'Australia',
city: 'Sydney',
amount: 3920,
date: new Date('2013-01-05'),
}, {
id: 10264,
region: 'Australia',
country: 'Australia',
city: 'Melbourne',
amount: 2220,
date: new Date('2013-01-15'),
}, {
id: 10265,
region: 'Africa',
country: 'South Africa',
city: 'Pretoria',
amount: 940,
date: new Date('2013-01-01'),
}, {
id: 10266,
region: 'Africa',
country: 'Egypt',
city: 'Cairo',
amount: 1630,
date: new Date('2013-01-10'),
}, {
id: 10267,
region: 'North America',
country: 'Canada',
city: 'Edmonton',
amount: 2910,
date: new Date('2013-01-23'),
}, {
id: 10268,
region: 'North America',
country: 'United States of America',
city: 'Los Angeles',
amount: 2600,
date: new Date('2013-01-14'),
}, {
id: 10269,
region: 'Europe',
country: 'Spain',
city: 'Madrid',
amount: 4340,
date: new Date('2013-01-26'),
}, {
id: 10270,
region: 'Europe',
country: 'United Kingdom',
city: 'London',
amount: 6650,
date: new Date('2013-01-24'),
}, {
id: 10271,
region: 'North America',
country: 'Canada',
city: 'Edmonton',
amount: 490,
date: new Date('2013-01-22'),
}, {
id: 10272,
region: 'North America',
country: 'United States of America',
city: 'New York',
amount: 3390,
date: new Date('2013-01-25'),
}, {
id: 10273,
region: 'North America',
country: 'United States of America',
city: 'New York',
amount: 5160,
date: new Date('2013-02-20'),
}, {
id: 10274,
region: 'North America',
country: 'United States of America',
city: 'Los Angeles',
amount: 5750,
date: new Date('2013-02-12'),
}, {
id: 10275,
region: 'North America',
country: 'United States of America',
city: 'Denver',
amount: 2805,
date: new Date('2013-02-13'),
}, {
id: 10276,
region: 'North America',
country: 'Canada',
city: 'Vancouver',
amount: 2505,
date: new Date('2013-02-09'),
}, {
id: 10277,
region: 'North America',
country: 'Canada',
city: 'Edmonton',
amount: 930,
date: new Date('2013-02-04'),
}, {
id: 10278,
region: 'South America',
country: 'Brazil',
city: 'Rio de Janeiro',
amount: 1240,
date: new Date('2013-02-03'),
}, {
id: 10279,
region: 'South America',
country: 'Argentina',
city: 'Buenos Aires',
amount: 315,
date: new Date('2013-02-04'),
}, {
id: 10280,
region: 'South America',
country: 'Paraguay',
city: 'Asuncion',
amount: 2870,
date: new Date('2013-02-18'),
}, {
id: 10281,
region: 'Europe',
country: 'United Kingdom',
city: 'London',
amount: 5150,
date: new Date('2013-02-18'),
}, {
id: 10282,
region: 'Europe',
country: 'Germany',
city: 'Berlin',
amount: 2725,
date: new Date('2013-02-20'),
}, {
id: 10283,
region: 'Europe',
country: 'Spain',
city: 'Madrid',
amount: 2840,
date: new Date('2013-02-04'),
}, {
id: 10284,
region: 'Europe',
country: 'Russian Federation',
city: 'Moscow',
amount: 5840,
date: new Date('2013-02-13'),
}, {
id: 10285,
region: 'Asia',
country: 'China',
city: 'Beijing',
amount: 6750,
date: new Date('2013-02-11'),
}, {
id: 10286,
region: 'Asia',
country: 'Japan',
city: 'Tokyo',
amount: 1200,
date: new Date('2013-02-03'),
}, {
id: 10287,
region: 'Asia',
country: 'Republic of Korea',
city: 'Seoul',
amount: 4550,
date: new Date('2013-02-08'),
}, {
id: 10288,
region: 'Australia',
country: 'Australia',
city: 'Sydney',
amount: 6040,
date: new Date('2013-02-17'),
}, {
id: 10289,
region: 'Australia',
country: 'Australia',
city: 'Melbourne',
amount: 2205,
date: new Date('2013-02-08'),
}, {
id: 10290,
region: 'Africa',
country: 'South Africa',
city: 'Pretoria',
amount: 990,
date: new Date('2013-02-20'),
}, {
id: 10291,
region: 'Africa',
country: 'Egypt',
city: 'Cairo',
amount: 700,
date: new Date('2013-02-11'),
}, {
id: 10292,
region: 'Australia',
country: 'Australia',
city: 'Melbourne',
amount: 2325,
date: new Date('2013-02-15'),
}, {
id: 10293,
region: 'South America',
country: 'Argentina',
city: 'Buenos Aires',
amount: 930,
date: new Date('2013-02-21'),
}, {
id: 10294,
region: 'North America',
country: 'Canada',
city: 'Edmonton',
amount: 1560,
date: new Date('2013-02-04'),
}, {
id: 10295,
region: 'North America',
country: 'United States of America',
city: 'New York',
amount: 1740,
date: new Date('2013-03-04'),
}, {
id: 10296,
region: 'North America',
country: 'United States of America',
city: 'Los Angeles',
amount: 3575,
date: new Date('2013-03-20'),
}, {
id: 10297,
region: 'North America',
country: 'United States of America',
city: 'Denver',
amount: 4500,
date: new Date('2013-03-04'),
}, {
id: 10298,
region: 'North America',
country: 'Canada',
city: 'Vancouver',
amount: 1605,
date: new Date('2013-03-17'),
}, {
id: 10299,
region: 'North America',
country: 'Canada',
city: 'Edmonton',
amount: 800,
date: new Date('2013-03-21'),
}, {
id: 10300,
region: 'South America',
country: 'Brazil',
city: 'Rio de Janeiro',
amount: 640,
date: new Date('2013-03-08'),
}, {
id: 10301,
region: 'South America',
country: 'Argentina',
city: 'Buenos Aires',
amount: 735,
date: new Date('2013-03-19'),
}, {
id: 10302,
region: 'South America',
country: 'Paraguay',
city: 'Asuncion',
amount: 2520,
date: new Date('2013-03-20'),
}, {
id: 10303,
region: 'Europe',
country: 'United Kingdom',
city: 'London',
amount: 6675,
date: new Date('2013-03-18'),
}, {
id: 10304,
region: 'Europe',
country: 'Germany',
city: 'Berlin',
amount: 3625,
date: new Date('2013-03-25'),
}, {
id: 10305,
region: 'Europe',
country: 'Spain',
city: 'Madrid',
amount: 1200,
date: new Date('2013-03-07'),
}, {
id: 10306,
region: 'Europe',
country: 'Russian Federation',
city: 'Moscow',
amount: 2000,
date: new Date('2013-03-07'),
}, {
id: 10307,
region: 'Asia',
country: 'China',
city: 'Beijing',
amount: 1410,
date: new Date('2013-03-10'),
}, {
id: 10308,
region: 'Asia',
country: 'Japan',
city: 'Tokyo',
amount: 2700,
date: new Date('2013-03-19'),
}, {
id: 10309,
region: 'Asia',
country: 'Republic of Korea',
city: 'Seoul',
amount: 5950,
date: new Date('2013-03-24'),
}, {
id: 10310,
region: 'Australia',
country: 'Australia',
city: 'Sydney',
amount: 5120,
date: new Date('2013-03-08'),
}, {
id: 10311,
region: 'Australia',
country: 'Australia',
city: 'Melbourne',
amount: 1980,
date: new Date('2013-03-17'),
}, {
id: 10312,
region: 'Africa',
country: 'South Africa',
city: 'Pretoria',
amount: 1110,
date: new Date('2013-03-08'),
}, {
id: 10313,
region: 'Africa',
country: 'Egypt',
city: 'Cairo',
amount: 980,
date: new Date('2013-03-21'),
}, {
id: 10314,
region: 'Australia',
country: 'Australia',
city: 'Sydney',
amount: 5460,
date: new Date('2013-03-19'),
}, {
id: 10315,
region: 'Europe',
country: 'Germany',
city: 'Berlin',
amount: 3800,
date: new Date('2013-03-12'),
}, {
id: 10316,
region: 'Australia',
country: 'Australia',
city: 'Melbourne',
amount: 2610,
date: new Date('2013-03-04'),
}, {
id: 10317,
region: 'Europe',
country: 'Russian Federation',
city: 'Moscow',
amount: 3080,
date: new Date('2013-03-22'),
}, {
id: 10318,
region: 'Asia',
country: 'Japan',
city: 'Tokyo',
amount: 2010,
date: new Date('2013-03-23'),
}, {
id: 10319,
region: 'Asia',
country: 'China',
city: 'Beijing',
amount: 1200,
date: new Date('2013-03-04'),
}, {
id: 10320,
region: 'North America',
country: 'United States of America',
city: 'New York',
amount: 7680,
date: new Date('2013-04-15'),
}, {
id: 10321,
region: 'North America',
country: 'United States of America',
city: 'Los Angeles',
amount: 1325,
date: new Date('2013-04-07'),
}, {
id: 10322,
region: 'North America',
country: 'United States of America',
city: 'Denver',
amount: 2835,
date: new Date('2013-04-10'),
}, {
id: 10323,
region: 'North America',
country: 'Canada',
city: 'Vancouver',
amount: 3660,
date: new Date('2013-04-10'),
}, {
id: 10324,
region: 'North America',
country: 'Canada',
city: 'Edmonton',
amount: 390,
date: new Date('2013-04-12'),
}, {
id: 10325,
region: 'South America',
country: 'Brazil',
city: 'Rio de Janeiro',
amount: 4420,
date: new Date('2013-04-08'),
}, {
id: 10326,
region: 'South America',
country: 'Argentina',
city: 'Buenos Aires',
amount: 1755,
date: new Date('2013-04-13'),
}, {
id: 10327,
region: 'South America',
country: 'Paraguay',
city: 'Asuncion',
amount: 2580,
date: new Date('2013-04-15'),
}, {
id: 10328,
region: 'Europe',
country: 'United Kingdom',
city: 'London',
amount: 850,
date: new Date('2013-04-01'),
}, {
id: 10329,
region: 'Europe',
country: 'Germany',
city: 'Berlin',
amount: 2825,
date: new Date('2013-04-10'),
}, {
id: 10330,
region: 'Europe',
country: 'Spain',
city: 'Madrid',
amount: 540,
date: new Date('2013-04-06'),
}, {
id: 10331,
region: 'Europe',
country: 'Russian Federation',
city: 'Moscow',
amount: 1520,
date: new Date('2013-04-08'),
}, {
id: 10332,
region: 'Asia',
country: 'China',
city: 'Beijing',
amount: 8760,
date: new Date('2013-04-26'),
}, {
id: 10333,
region: 'Asia',
country: 'Japan',
city: 'Tokyo',
amount: 1110,
date: new Date('2013-04-16'),
}, {
id: 10334,
region: 'Asia',
country: 'Republic of Korea',
city: 'Seoul',
amount: 6850,
date: new Date('2013-04-19'),
}, {
id: 10335,
region: 'Australia',
country: 'Australia',
city: 'Sydney',
amount: 1940,
date: new Date('2013-04-23'),
}, {
id: 10336,
region: 'Australia',
country: 'Australia',
city: 'Melbourne',
amount: 1980,
date: new Date('2013-04-21'),
}, {
id: 10337,
region: 'Africa',
country: 'South Africa',
city: 'Pretoria',
amount: 3090,
date: new Date('2013-04-03'),
}, {
id: 10338,
region: 'Africa',
country: 'Egypt',
city: 'Cairo',
amount: 1640,
date: new Date('2013-04-24'),
}, {
id: 10339,
region: 'Australia',
country: 'Australia',
city: 'Melbourne',
amount: 3585,
date: new Date('2013-04-01'),
}, {
id: 10340,
region: 'North America',
country: 'Canada',
city: 'Vancouver',
amount: 1770,
date: new Date('2013-04-01'),
}, {
id: 10887,
region: 'Africa',
country: 'Egypt',
city: 'Cairo',
amount: 500,
date: new Date('2015-05-26'),
}, {
id: 10888,
region: 'South America',
country: 'Argentina',
city: 'Buenos Aires',
amount: 780,
date: new Date('2015-05-07'),
}];
export default {
components: {
DxChart,
DxAdaptiveLayout,
DxCommonSeriesSettings,
DxSize,
DxTooltip,
DxPivotGrid,
DxFieldChooser,
},
data() {
return {
dataSource: {
fields: [{
caption: 'Region',
width: 120,
dataField: 'region',
area: 'row',
sortBySummaryField: 'Total',
}, {
caption: 'City',
dataField: 'city',
width: 150,
area: 'row',
}, {
dataField: 'date',
dataType: 'date',
area: 'column',
}, {
groupName: 'date',
groupInterval: 'month',
visible: false,
}, {
caption: 'Total',
dataField: 'amount',
dataType: 'number',
summaryType: 'sum',
format: 'currency',
area: 'data',
}],
store: sales,
},
customizeTooltip(args) {
const valueText = currencyFormatter.format(args.originalValue);
return {
html: `${args.seriesName} | Total<div class='currency'>${valueText}</div>`,
};
},
};
},
mounted() {
const pivotGrid = this.$refs.grid.instance;
const chart = this.$refs.chart.instance;
pivotGrid.bindChart(chart, {
dataFieldsDisplayMode: 'splitPanes',
alternateDataFields: false,
});
const dataSource = pivotGrid.getDataSource();
setTimeout(() => {
dataSource.expandHeaderItem('row', ['North America']);
dataSource.expandHeaderItem('column', [2013]);
}, 0);
},
};
</script>
<style>
#pivotgrid {
margin-top: 20px;
}
.currency {
text-align: center;
}
</style>
2.3.2 参数说明
参考地址： PivotGrid入门：DevExtreme - DevExpress 的 Angular、React、Vue 和 jQuery 的 JavaScript UI 组件
