Welcome to the Vue feedback portal. We’re happy you’re here! If you have feedback on how to improve the Vue, we’d love to hear it!>
Thanks for joining our community and helping improve Syncfusion products!
<template>
<div>
<div class="config-button-container">
<ejs-button v-on:click.native="btnClick">Show Field List</ejs-button>
<ejs-button v- on:click.native="btnClickExcel">Excel Export</ejs-button>
</div>
<ejs-pivotview
class="cusStyle"
locale="ch"
:allowExcelExport="true"
ref="gzj" id="pivotview_flist"
:height="height"
:cellClick="cellClick"
:enginePopulated="enginePopulated"></ejs-pivotview>
<ejs-pivotfieldlist
cssClass="cusStyle"
locale="ch"
ref="pivotfieldlist1"
id="pivotfieldlist1"
:dataSourceSettings="dataSourceSettings"
:enginePopulated="fieldEnginePopulated"
:renderMode="renderMode"
:allowDeferLayoutUpdate="false"></ejs-pivotfieldlist>
</div>
</template>
<script>
import Vue from "vue";
import { PivotViewPlugin, PivotFieldListPlugin, FieldList } from "@syncfusion/ej2-vue-pivotview";
import { ButtonPlugin} from "@syncfusion/ej2-vue-buttons";
import { L10n} from '@syncfusion/ej2-base';
Vue.use(PivotViewPlugin);
Vue.use(PivotFieldListPlugin);
Vue.use(ButtonPlugin);
L10n.load({
'ch': {
'pivotview': {
'grandTotal': '总计',
'total': '全部的',
'value': '值',
'row': '行',
'column': '列',
'collapse': '关闭',
'expand': '展开',
'rowAxisPrompt': '在此处放置行',
'columnAxisPrompt': '在此处放置列',
'valueAxisPrompt': '在此处放置值',
'filterAxisPrompt': '在此处放置筛选器',
'filter': '筛选器',
'filtered': '过滤',
'sort': '排序',
'filters': '筛选器',
'delete': '删除',
'columns': '列',
'values': '值',
'close': '关闭',
'cancel': '取消',
'calculatedField': '计算字段',
'createCalculatedField': '创建计算字段',
'fieldName': '字段名',
'format': '按汇总值',
'rows': '行'
},
"pivotfieldlist": {
'fieldList': '字段列表',
'centerHeader': '头部居中',
'add': '加',
'drag': '拖曳',
'filters': '过滤器',
'rows': '行',
'columns': '列',
'values': '结果',
'error': '错误',
'dropAction': '删除操作',
'search': '搜索',
'close': '关闭',
'cancel': '取消',
'delete': '删除',
'alert': 'alert',
'warning': '警告',
'ok': '完成',
'allFields': '所有字段',
'noMatches': '无匹配项'
}
}
});
export default {
data () {
return {
dataSourceSettings: {
dataSource: [],
expandAll: false,
drilledMembers: [{ name: 'Year', items: ['FY 2015'] }],
columns: [{ name: 'Year', caption: 'Production Year' },
{ name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' },
{ name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
// rows: [{ name: 'Country' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
},
renderMode: 'Popup',
height: 320,
target: '#pivotfieldlist1',
isPrimary: true
}
}
}
</script>