mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-29 14:46:41 +08:00
feat: add dark mode support in vtable
This commit is contained in:
Rui-Sun
parent
0e105f32e4
commit
caa686cefd
@ -39,27 +39,30 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<NSpace vertical :size="16">
|
<NSpace vertical :size="16">
|
||||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
<NCard title="Stacked Dash Area Chart" :bordered="false" class="h-full card-wrapper">
|
||||||
<div ref="stackedDashAreaRef" class="h-400px" />
|
<div ref="stackedDashAreaRef" class="h-400px" />
|
||||||
</NCard>
|
</NCard>
|
||||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
<NCard title="Bar Mark Point Chart" :bordered="false" class="h-full card-wrapper">
|
||||||
<div ref="barMarkPointRef" class="h-400px" />
|
<div ref="barMarkPointRef" class="h-400px" />
|
||||||
</NCard>
|
</NCard>
|
||||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
<NCard title="Histogram Different Bin Chart" :bordered="false" class="h-full card-wrapper">
|
||||||
<div ref="histogramDifferentBinRef" class="h-400px" />
|
<div ref="histogramDifferentBinRef" class="h-400px" />
|
||||||
</NCard>
|
</NCard>
|
||||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
<NCard title="Ranking Bar Chart" :bordered="false" class="h-full card-wrapper">
|
||||||
<div ref="rankingBarRef" class="h-400px" />
|
<div ref="rankingBarRef" class="h-400px" />
|
||||||
</NCard>
|
</NCard>
|
||||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
<NCard title="Circular Progress Tick Chart" :bordered="false" class="h-full card-wrapper">
|
||||||
<div ref="circularProgressTickRef" class="h-400px" />
|
<div ref="circularProgressTickRef" class="h-400px" />
|
||||||
</NCard>
|
</NCard>
|
||||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
<NCard title="Liquid Chart Smart Invert Chart" :bordered="false" class="h-full card-wrapper">
|
||||||
<div ref="liquidChartSmartInvertRef" class="h-400px" />
|
<div ref="liquidChartSmartInvertRef" class="h-400px" />
|
||||||
</NCard>
|
</NCard>
|
||||||
<NCard title="List Chart" :bordered="false" class="h-full card-wrapper">
|
<NCard title="Shape Word Cloud Chart" :bordered="false" class="h-full card-wrapper">
|
||||||
<div ref="shapeWordCloudRef" class="h-400px" />
|
<div ref="shapeWordCloudRef" class="h-400px" />
|
||||||
</NCard>
|
</NCard>
|
||||||
|
<NCard :bordered="false" class="h-full w-2/3 card-wrapper">
|
||||||
|
<WebSiteLink label="More VChart Demos: " link="https://www.visactor.com/vchart/example" />
|
||||||
|
</NCard>
|
||||||
</NSpace>
|
</NSpace>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
const listTableRecords = [
|
export const listTableRecords = [
|
||||||
{
|
{
|
||||||
'Row ID': '7981',
|
'Row ID': '7981',
|
||||||
'Order ID': 'CA-2015-103800',
|
'Order ID': 'CA-2015-103800',
|
||||||
@ -691,4 +691,354 @@ const listTableRecords = [
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
export { listTableRecords };
|
export const customListRecords = [
|
||||||
|
{
|
||||||
|
bloggerId: 1,
|
||||||
|
bloggerName: 'Virtual Anchor Xiaohua',
|
||||||
|
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
|
||||||
|
introduction:
|
||||||
|
'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
|
||||||
|
fansCount: 400,
|
||||||
|
worksCount: 10,
|
||||||
|
viewCount: 5,
|
||||||
|
city: 'Dream City',
|
||||||
|
tags: ['game', 'anime', 'food']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bloggerId: 2,
|
||||||
|
bloggerName: 'Virtual anchor little wolf',
|
||||||
|
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
|
||||||
|
introduction:
|
||||||
|
'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
|
||||||
|
fansCount: 800,
|
||||||
|
worksCount: 20,
|
||||||
|
viewCount: 15,
|
||||||
|
city: 'City of Music',
|
||||||
|
tags: ['music', 'travel', 'photography']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bloggerId: 3,
|
||||||
|
bloggerName: 'Virtual anchor bunny',
|
||||||
|
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
|
||||||
|
introduction:
|
||||||
|
'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
|
||||||
|
fansCount: 600,
|
||||||
|
worksCount: 15,
|
||||||
|
viewCount: 10,
|
||||||
|
city: 'City of Art',
|
||||||
|
tags: ['painting', 'handmade', 'beauty makeup']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bloggerId: 4,
|
||||||
|
bloggerName: 'Virtual anchor kitten',
|
||||||
|
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
|
||||||
|
introduction:
|
||||||
|
'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
|
||||||
|
fansCount: 1000,
|
||||||
|
worksCount: 30,
|
||||||
|
viewCount: 20,
|
||||||
|
city: 'Health City',
|
||||||
|
tags: ['dance', 'fitness', 'cooking']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bloggerId: 5,
|
||||||
|
bloggerName: 'Virtual anchor Bear',
|
||||||
|
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
|
||||||
|
introduction:
|
||||||
|
'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
|
||||||
|
fansCount: 1200,
|
||||||
|
worksCount: 25,
|
||||||
|
viewCount: 18,
|
||||||
|
city: 'City of Wisdom',
|
||||||
|
tags: ['Movie', 'Literature']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bloggerId: 6,
|
||||||
|
bloggerName: 'Virtual anchor bird',
|
||||||
|
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
|
||||||
|
introduction:
|
||||||
|
'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
|
||||||
|
fansCount: 900,
|
||||||
|
worksCount: 12,
|
||||||
|
viewCount: 8,
|
||||||
|
city: 'Happy City',
|
||||||
|
tags: ['music', 'performance', 'variety']
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const pivotChartColumns = [
|
||||||
|
{
|
||||||
|
dimensionKey: 'Region',
|
||||||
|
title: 'Region',
|
||||||
|
headerStyle: {
|
||||||
|
textStick: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'Category'
|
||||||
|
];
|
||||||
|
export const pivotChartRows = [
|
||||||
|
{
|
||||||
|
dimensionKey: 'Order Year',
|
||||||
|
title: 'Order Year',
|
||||||
|
headerStyle: {
|
||||||
|
textStick: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'Ship Mode'
|
||||||
|
];
|
||||||
|
export const pivotChartIndicators = [
|
||||||
|
{
|
||||||
|
indicatorKey: 'Quantity',
|
||||||
|
title: 'Quantity',
|
||||||
|
width: 'auto',
|
||||||
|
cellType: 'chart',
|
||||||
|
chartModule: 'vchart',
|
||||||
|
chartSpec: {
|
||||||
|
stack: true,
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
id: 'data',
|
||||||
|
fields: {
|
||||||
|
'Sub-Category': {
|
||||||
|
sortIndex: 0,
|
||||||
|
domain: [
|
||||||
|
'Chairs',
|
||||||
|
'Tables',
|
||||||
|
'Bookcases',
|
||||||
|
'Furnishings',
|
||||||
|
'Binders',
|
||||||
|
'Art',
|
||||||
|
'Storage',
|
||||||
|
'Appliances',
|
||||||
|
'Envelopes',
|
||||||
|
'Fasteners',
|
||||||
|
'Paper',
|
||||||
|
'Labels',
|
||||||
|
'Supplies',
|
||||||
|
'Accessories',
|
||||||
|
'Phones',
|
||||||
|
'Copiers',
|
||||||
|
'Machines'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'Segment-Indicator': {
|
||||||
|
sortIndex: 1,
|
||||||
|
domain: [
|
||||||
|
'Consumer-Quantity',
|
||||||
|
'Corporate-Quantity',
|
||||||
|
'Home Office-Quantity',
|
||||||
|
'Consumer-Sales',
|
||||||
|
'Corporate-Sales',
|
||||||
|
'Home Office-Sales',
|
||||||
|
'Consumer-Profit',
|
||||||
|
'Corporate-Profit',
|
||||||
|
'Home Office-Profit'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xField: ['Sub-Category'],
|
||||||
|
yField: 'Quantity',
|
||||||
|
seriesField: 'Segment-Indicator',
|
||||||
|
axes: [
|
||||||
|
{ orient: 'left', visible: true, label: { visible: true } },
|
||||||
|
{ orient: 'bottom', visible: true }
|
||||||
|
],
|
||||||
|
bar: {
|
||||||
|
state: {
|
||||||
|
selected: { fill: 'yellow' },
|
||||||
|
selected_reverse: { opacity: 0.2 }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: [
|
||||||
|
{
|
||||||
|
id: 'color',
|
||||||
|
type: 'ordinal',
|
||||||
|
domain: [
|
||||||
|
'Consumer-Quantity',
|
||||||
|
'Corporate-Quantity',
|
||||||
|
'Home Office-Quantity',
|
||||||
|
'Consumer-Sales',
|
||||||
|
'Corporate-Sales',
|
||||||
|
'Home Office-Sales',
|
||||||
|
'Consumer-Profit',
|
||||||
|
'Corporate-Profit',
|
||||||
|
'Home Office-Profit'
|
||||||
|
],
|
||||||
|
range: [
|
||||||
|
'#2E62F1',
|
||||||
|
'#4DC36A',
|
||||||
|
'#FF8406',
|
||||||
|
'#FFCC00',
|
||||||
|
'#4F44CF',
|
||||||
|
'#5AC8FA',
|
||||||
|
'#003A8C',
|
||||||
|
'#B08AE2',
|
||||||
|
'#FF6341',
|
||||||
|
'#98DD62',
|
||||||
|
'#07A199',
|
||||||
|
'#87DBDD'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
style: { padding: 1 }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicatorKey: 'Sales',
|
||||||
|
title: 'Sales & Profit',
|
||||||
|
cellType: 'chart',
|
||||||
|
chartModule: 'vchart',
|
||||||
|
chartSpec: {
|
||||||
|
type: 'common',
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
id: 'data1',
|
||||||
|
fields: {
|
||||||
|
'Sub-Category': {
|
||||||
|
sortIndex: 0,
|
||||||
|
domain: [
|
||||||
|
'Chairs',
|
||||||
|
'Tables',
|
||||||
|
'Bookcases',
|
||||||
|
'Furnishings',
|
||||||
|
'Binders',
|
||||||
|
'Art',
|
||||||
|
'Storage',
|
||||||
|
'Appliances',
|
||||||
|
'Envelopes',
|
||||||
|
'Fasteners',
|
||||||
|
'Paper',
|
||||||
|
'Labels',
|
||||||
|
'Supplies',
|
||||||
|
'Accessories',
|
||||||
|
'Phones',
|
||||||
|
'Copiers',
|
||||||
|
'Machines'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'Segment-Indicator': {
|
||||||
|
sortIndex: 1,
|
||||||
|
domain: [
|
||||||
|
'Consumer-Quantity',
|
||||||
|
'Corporate-Quantity',
|
||||||
|
'Home Office-Quantity',
|
||||||
|
'Consumer-Sales',
|
||||||
|
'Corporate-Sales',
|
||||||
|
'Home Office-Sales',
|
||||||
|
'Consumer-Profit',
|
||||||
|
'Corporate-Profit',
|
||||||
|
'Home Office-Profit'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
stack: true,
|
||||||
|
xField: ['Sub-Category'],
|
||||||
|
yField: 'Sales',
|
||||||
|
seriesField: 'Segment-Indicator',
|
||||||
|
bar: {
|
||||||
|
state: {
|
||||||
|
selected: { fill: 'yellow' },
|
||||||
|
selected_reverse: { opacity: 0.2 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
id: 'data2',
|
||||||
|
fields: {
|
||||||
|
'Sub-Category': {
|
||||||
|
sortIndex: 0,
|
||||||
|
domain: [
|
||||||
|
'Chairs',
|
||||||
|
'Tables',
|
||||||
|
'Bookcases',
|
||||||
|
'Furnishings',
|
||||||
|
'Binders',
|
||||||
|
'Art',
|
||||||
|
'Storage',
|
||||||
|
'Appliances',
|
||||||
|
'Envelopes',
|
||||||
|
'Fasteners',
|
||||||
|
'Paper',
|
||||||
|
'Labels',
|
||||||
|
'Supplies',
|
||||||
|
'Phones',
|
||||||
|
'Accessories',
|
||||||
|
'Machines',
|
||||||
|
'Copiers'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
'Segment-Indicator': {
|
||||||
|
sortIndex: 1,
|
||||||
|
domain: [
|
||||||
|
'Consumer-Quantity',
|
||||||
|
'Corporate-Quantity',
|
||||||
|
'Home Office-Quantity',
|
||||||
|
'Consumer-Sales',
|
||||||
|
'Corporate-Sales',
|
||||||
|
'Home Office-Sales',
|
||||||
|
'Consumer-Profit',
|
||||||
|
'Corporate-Profit',
|
||||||
|
'Home Office-Profit'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
stack: false,
|
||||||
|
xField: ['Sub-Category'],
|
||||||
|
yField: 'Profit',
|
||||||
|
seriesField: 'Segment-Indicator',
|
||||||
|
line: {
|
||||||
|
state: {
|
||||||
|
selected: { lineWidth: 3 },
|
||||||
|
selected_reverse: { lineWidth: 1 }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
point: {
|
||||||
|
state: {
|
||||||
|
selected: { fill: 'yellow' },
|
||||||
|
selected_reverse: { fill: '#ddd' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
scales: [
|
||||||
|
{
|
||||||
|
id: 'color',
|
||||||
|
type: 'ordinal',
|
||||||
|
domain: [
|
||||||
|
'Consumer-Quantity',
|
||||||
|
'Corporate-Quantity',
|
||||||
|
'Home Office-Quantity',
|
||||||
|
'Consumer-Sales',
|
||||||
|
'Corporate-Sales',
|
||||||
|
'Home Office-Sales',
|
||||||
|
'Consumer-Profit',
|
||||||
|
'Corporate-Profit',
|
||||||
|
'Home Office-Profit'
|
||||||
|
],
|
||||||
|
range: [
|
||||||
|
'#2E62F1',
|
||||||
|
'#4DC36A',
|
||||||
|
'#FF8406',
|
||||||
|
'#FFCC00',
|
||||||
|
'#4F44CF',
|
||||||
|
'#5AC8FA',
|
||||||
|
'#003A8C',
|
||||||
|
'#B08AE2',
|
||||||
|
'#FF6341',
|
||||||
|
'#98DD62',
|
||||||
|
'#07A199',
|
||||||
|
'#87DBDD'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
style: { padding: 1 }
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="tsx">
|
<script setup lang="tsx">
|
||||||
import { onMounted, ref } from 'vue';
|
import { computed, onMounted, ref } from 'vue';
|
||||||
import {
|
import {
|
||||||
Group,
|
Group,
|
||||||
Image,
|
Image,
|
||||||
@ -14,32 +14,72 @@ import {
|
|||||||
PivotTable,
|
PivotTable,
|
||||||
Tag,
|
Tag,
|
||||||
Text,
|
Text,
|
||||||
|
VTable,
|
||||||
registerChartModule
|
registerChartModule
|
||||||
} from '@visactor/vue-vtable';
|
} from '@visactor/vue-vtable';
|
||||||
import VChart from '@visactor/vchart';
|
import VChart from '@visactor/vchart';
|
||||||
import { listTableRecords } from './data';
|
import { useThemeStore } from '@/store/modules/theme';
|
||||||
|
import { customListRecords, listTableRecords, pivotChartColumns, pivotChartIndicators, pivotChartRows } from './data';
|
||||||
|
|
||||||
registerChartModule('vchart', VChart);
|
registerChartModule('vchart', VChart);
|
||||||
|
const titleColorPool = ['#3370ff', '#34c724', '#ff9f1a', '#ff4050', '#1f2329'];
|
||||||
|
|
||||||
|
const themeStore = useThemeStore();
|
||||||
|
|
||||||
// list table
|
// list table
|
||||||
const listTableRef = ref(null);
|
const listTableRef = ref(null);
|
||||||
|
const listOptions = computed(() => {
|
||||||
|
const options = {
|
||||||
|
theme: themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT
|
||||||
|
};
|
||||||
|
return options;
|
||||||
|
});
|
||||||
const listRecords = ref<Record<string, string | number>[]>(listTableRecords);
|
const listRecords = ref<Record<string, string | number>[]>(listTableRecords);
|
||||||
|
|
||||||
|
// group table
|
||||||
|
const groupTableRef = ref(null);
|
||||||
|
const groupOptions = computed(() => {
|
||||||
|
const options = {
|
||||||
|
groupBy: ['Category', 'Sub-Category'],
|
||||||
|
theme: (themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT).extends({
|
||||||
|
groupTitleStyle: {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
bgColor: (args: any) => {
|
||||||
|
const { col, row, table } = args;
|
||||||
|
const index = table.getGroupTitleLevel(col, row);
|
||||||
|
if (index !== undefined) {
|
||||||
|
return titleColorPool[index % titleColorPool.length] as string;
|
||||||
|
}
|
||||||
|
return 'white';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
return options;
|
||||||
|
});
|
||||||
|
const groupRecords = ref<Record<string, string | number>[]>(listTableRecords);
|
||||||
|
|
||||||
// pivot table
|
// pivot table
|
||||||
const pivotTableRef = ref(null);
|
const pivotTableRef = ref(null);
|
||||||
const pivotTableOptions = ref({
|
const pivotTableOptions = computed(() => {
|
||||||
tooltip: {
|
return {
|
||||||
isShowOverflowTextTooltip: true
|
tooltip: {
|
||||||
},
|
isShowOverflowTextTooltip: true
|
||||||
dataConfig: {
|
},
|
||||||
sortRules: [
|
dataConfig: {
|
||||||
{
|
sortRules: [
|
||||||
sortField: 'Category',
|
{
|
||||||
sortBy: ['Office Supplies', 'Technology', 'Furniture']
|
sortField: 'Category',
|
||||||
}
|
sortBy: ['Office Supplies', 'Technology', 'Furniture']
|
||||||
]
|
}
|
||||||
},
|
]
|
||||||
widthMode: 'standard'
|
},
|
||||||
|
widthMode: 'standard',
|
||||||
|
theme: themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT,
|
||||||
|
emptyTip: {
|
||||||
|
text: 'no data records'
|
||||||
|
}
|
||||||
|
};
|
||||||
});
|
});
|
||||||
const pivotTableIndicators = ref([
|
const pivotTableIndicators = ref([
|
||||||
{
|
{
|
||||||
@ -96,325 +136,54 @@ const pivotTableRecords = ref([]);
|
|||||||
|
|
||||||
// pivot chart
|
// pivot chart
|
||||||
const pivotChartRef = ref(null);
|
const pivotChartRef = ref(null);
|
||||||
const pivotChartColumns = [
|
const pivotChartOptions = computed(() => {
|
||||||
{
|
return {
|
||||||
dimensionKey: 'Region',
|
rows: pivotChartRows,
|
||||||
title: 'Region',
|
columns: pivotChartColumns,
|
||||||
headerStyle: {
|
indicators: pivotChartIndicators,
|
||||||
textStick: true
|
indicatorsAsCol: false,
|
||||||
}
|
defaultRowHeight: 200,
|
||||||
},
|
defaultHeaderRowHeight: 50,
|
||||||
'Category'
|
defaultColWidth: 280,
|
||||||
];
|
defaultHeaderColWidth: 100,
|
||||||
const pivotChartRows = [
|
indicatorTitle: '指标',
|
||||||
{
|
autoWrapText: true,
|
||||||
dimensionKey: 'Order Year',
|
corner: {
|
||||||
title: 'Order Year',
|
titleOnDimension: 'row',
|
||||||
headerStyle: {
|
headerStyle: { autoWrapText: true }
|
||||||
textStick: true
|
},
|
||||||
}
|
legends: {
|
||||||
},
|
orient: 'bottom',
|
||||||
'Ship Mode'
|
type: 'discrete',
|
||||||
];
|
data: [
|
||||||
const pivotChartIndicators = [
|
{ label: 'Consumer-Quantity', shape: { fill: '#2E62F1', symbolType: 'circle' } },
|
||||||
{
|
{ label: 'Consumer-Quantity', shape: { fill: '#4DC36A', symbolType: 'square' } },
|
||||||
indicatorKey: 'Quantity',
|
{ label: 'Home Office-Quantity', shape: { fill: '#FF8406', symbolType: 'square' } },
|
||||||
title: 'Quantity',
|
{ label: 'Consumer-Sales', shape: { fill: '#FFCC00', symbolType: 'square' } },
|
||||||
width: 'auto',
|
{ label: 'Consumer-Sales', shape: { fill: '#4F44CF', symbolType: 'square' } },
|
||||||
cellType: 'chart',
|
{ label: 'Home Office-Sales', shape: { fill: '#5AC8FA', symbolType: 'square' } },
|
||||||
chartModule: 'vchart',
|
{ label: 'Consumer-Profit', shape: { fill: '#003A8C', symbolType: 'square' } },
|
||||||
chartSpec: {
|
{ label: 'Consumer-Profit', shape: { fill: '#B08AE2', symbolType: 'square' } },
|
||||||
stack: true,
|
{ label: 'Home Office-Profit', shape: { fill: '#FF6341', symbolType: 'square' } }
|
||||||
type: 'bar',
|
|
||||||
data: {
|
|
||||||
id: 'data',
|
|
||||||
fields: {
|
|
||||||
'Sub-Category': {
|
|
||||||
sortIndex: 0,
|
|
||||||
domain: [
|
|
||||||
'Chairs',
|
|
||||||
'Tables',
|
|
||||||
'Bookcases',
|
|
||||||
'Furnishings',
|
|
||||||
'Binders',
|
|
||||||
'Art',
|
|
||||||
'Storage',
|
|
||||||
'Appliances',
|
|
||||||
'Envelopes',
|
|
||||||
'Fasteners',
|
|
||||||
'Paper',
|
|
||||||
'Labels',
|
|
||||||
'Supplies',
|
|
||||||
'Accessories',
|
|
||||||
'Phones',
|
|
||||||
'Copiers',
|
|
||||||
'Machines'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
'Segment-Indicator': {
|
|
||||||
sortIndex: 1,
|
|
||||||
domain: [
|
|
||||||
'Consumer-Quantity',
|
|
||||||
'Corporate-Quantity',
|
|
||||||
'Home Office-Quantity',
|
|
||||||
'Consumer-Sales',
|
|
||||||
'Corporate-Sales',
|
|
||||||
'Home Office-Sales',
|
|
||||||
'Consumer-Profit',
|
|
||||||
'Corporate-Profit',
|
|
||||||
'Home Office-Profit'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xField: ['Sub-Category'],
|
|
||||||
yField: 'Quantity',
|
|
||||||
seriesField: 'Segment-Indicator',
|
|
||||||
axes: [
|
|
||||||
{ orient: 'left', visible: true, label: { visible: true } },
|
|
||||||
{ orient: 'bottom', visible: true }
|
|
||||||
],
|
|
||||||
bar: {
|
|
||||||
state: {
|
|
||||||
selected: { fill: 'yellow' },
|
|
||||||
selected_reverse: { opacity: 0.2 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scales: [
|
|
||||||
{
|
|
||||||
id: 'color',
|
|
||||||
type: 'ordinal',
|
|
||||||
domain: [
|
|
||||||
'Consumer-Quantity',
|
|
||||||
'Corporate-Quantity',
|
|
||||||
'Home Office-Quantity',
|
|
||||||
'Consumer-Sales',
|
|
||||||
'Corporate-Sales',
|
|
||||||
'Home Office-Sales',
|
|
||||||
'Consumer-Profit',
|
|
||||||
'Corporate-Profit',
|
|
||||||
'Home Office-Profit'
|
|
||||||
],
|
|
||||||
range: [
|
|
||||||
'#2E62F1',
|
|
||||||
'#4DC36A',
|
|
||||||
'#FF8406',
|
|
||||||
'#FFCC00',
|
|
||||||
'#4F44CF',
|
|
||||||
'#5AC8FA',
|
|
||||||
'#003A8C',
|
|
||||||
'#B08AE2',
|
|
||||||
'#FF6341',
|
|
||||||
'#98DD62',
|
|
||||||
'#07A199',
|
|
||||||
'#87DBDD'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
style: { padding: 1 }
|
theme: (themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT).extends({
|
||||||
},
|
bodyStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 0, 1] },
|
||||||
{
|
headerStyle: { borderColor: 'gray', borderLineWidth: [0, 0, 1, 1], hover: { cellBgColor: '#CCE0FF' } },
|
||||||
indicatorKey: 'Sales',
|
rowHeaderStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 0], hover: { cellBgColor: '#CCE0FF' } },
|
||||||
title: 'Sales & Profit',
|
cornerHeaderStyle: { borderColor: 'gray', borderLineWidth: [0, 1, 1, 0], hover: { cellBgColor: '' } },
|
||||||
cellType: 'chart',
|
cornerRightTopCellStyle: { borderColor: 'gray', borderLineWidth: [0, 0, 1, 1], hover: { cellBgColor: '' } },
|
||||||
chartModule: 'vchart',
|
cornerLeftBottomCellStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 0], hover: { cellBgColor: '' } },
|
||||||
chartSpec: {
|
cornerRightBottomCellStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 0, 1], hover: { cellBgColor: '' } },
|
||||||
type: 'common',
|
rightFrozenStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 1, 1], hover: { cellBgColor: '' } },
|
||||||
series: [
|
bottomFrozenStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 1], hover: { cellBgColor: '' } },
|
||||||
{
|
selectionStyle: { cellBgColor: '', cellBorderColor: '' },
|
||||||
type: 'bar',
|
frameStyle: { borderLineWidth: 0 }
|
||||||
data: {
|
}),
|
||||||
id: 'data1',
|
emptyTip: {
|
||||||
fields: {
|
text: 'no data records'
|
||||||
'Sub-Category': {
|
}
|
||||||
sortIndex: 0,
|
};
|
||||||
domain: [
|
|
||||||
'Chairs',
|
|
||||||
'Tables',
|
|
||||||
'Bookcases',
|
|
||||||
'Furnishings',
|
|
||||||
'Binders',
|
|
||||||
'Art',
|
|
||||||
'Storage',
|
|
||||||
'Appliances',
|
|
||||||
'Envelopes',
|
|
||||||
'Fasteners',
|
|
||||||
'Paper',
|
|
||||||
'Labels',
|
|
||||||
'Supplies',
|
|
||||||
'Accessories',
|
|
||||||
'Phones',
|
|
||||||
'Copiers',
|
|
||||||
'Machines'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
'Segment-Indicator': {
|
|
||||||
sortIndex: 1,
|
|
||||||
domain: [
|
|
||||||
'Consumer-Quantity',
|
|
||||||
'Corporate-Quantity',
|
|
||||||
'Home Office-Quantity',
|
|
||||||
'Consumer-Sales',
|
|
||||||
'Corporate-Sales',
|
|
||||||
'Home Office-Sales',
|
|
||||||
'Consumer-Profit',
|
|
||||||
'Corporate-Profit',
|
|
||||||
'Home Office-Profit'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
stack: true,
|
|
||||||
xField: ['Sub-Category'],
|
|
||||||
yField: 'Sales',
|
|
||||||
seriesField: 'Segment-Indicator',
|
|
||||||
bar: {
|
|
||||||
state: {
|
|
||||||
selected: { fill: 'yellow' },
|
|
||||||
selected_reverse: { opacity: 0.2 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
id: 'data2',
|
|
||||||
fields: {
|
|
||||||
'Sub-Category': {
|
|
||||||
sortIndex: 0,
|
|
||||||
domain: [
|
|
||||||
'Chairs',
|
|
||||||
'Tables',
|
|
||||||
'Bookcases',
|
|
||||||
'Furnishings',
|
|
||||||
'Binders',
|
|
||||||
'Art',
|
|
||||||
'Storage',
|
|
||||||
'Appliances',
|
|
||||||
'Envelopes',
|
|
||||||
'Fasteners',
|
|
||||||
'Paper',
|
|
||||||
'Labels',
|
|
||||||
'Supplies',
|
|
||||||
'Phones',
|
|
||||||
'Accessories',
|
|
||||||
'Machines',
|
|
||||||
'Copiers'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
'Segment-Indicator': {
|
|
||||||
sortIndex: 1,
|
|
||||||
domain: [
|
|
||||||
'Consumer-Quantity',
|
|
||||||
'Corporate-Quantity',
|
|
||||||
'Home Office-Quantity',
|
|
||||||
'Consumer-Sales',
|
|
||||||
'Corporate-Sales',
|
|
||||||
'Home Office-Sales',
|
|
||||||
'Consumer-Profit',
|
|
||||||
'Corporate-Profit',
|
|
||||||
'Home Office-Profit'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
stack: false,
|
|
||||||
xField: ['Sub-Category'],
|
|
||||||
yField: 'Profit',
|
|
||||||
seriesField: 'Segment-Indicator',
|
|
||||||
line: {
|
|
||||||
state: {
|
|
||||||
selected: { lineWidth: 3 },
|
|
||||||
selected_reverse: { lineWidth: 1 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
point: {
|
|
||||||
state: {
|
|
||||||
selected: { fill: 'yellow' },
|
|
||||||
selected_reverse: { fill: '#ddd' }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
scales: [
|
|
||||||
{
|
|
||||||
id: 'color',
|
|
||||||
type: 'ordinal',
|
|
||||||
domain: [
|
|
||||||
'Consumer-Quantity',
|
|
||||||
'Corporate-Quantity',
|
|
||||||
'Home Office-Quantity',
|
|
||||||
'Consumer-Sales',
|
|
||||||
'Corporate-Sales',
|
|
||||||
'Home Office-Sales',
|
|
||||||
'Consumer-Profit',
|
|
||||||
'Corporate-Profit',
|
|
||||||
'Home Office-Profit'
|
|
||||||
],
|
|
||||||
range: [
|
|
||||||
'#2E62F1',
|
|
||||||
'#4DC36A',
|
|
||||||
'#FF8406',
|
|
||||||
'#FFCC00',
|
|
||||||
'#4F44CF',
|
|
||||||
'#5AC8FA',
|
|
||||||
'#003A8C',
|
|
||||||
'#B08AE2',
|
|
||||||
'#FF6341',
|
|
||||||
'#98DD62',
|
|
||||||
'#07A199',
|
|
||||||
'#87DBDD'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
style: { padding: 1 }
|
|
||||||
}
|
|
||||||
];
|
|
||||||
const pivotChartOptions = ref({
|
|
||||||
rows: pivotChartRows,
|
|
||||||
columns: pivotChartColumns,
|
|
||||||
indicators: pivotChartIndicators,
|
|
||||||
indicatorsAsCol: false,
|
|
||||||
defaultRowHeight: 200,
|
|
||||||
defaultHeaderRowHeight: 50,
|
|
||||||
defaultColWidth: 280,
|
|
||||||
defaultHeaderColWidth: 100,
|
|
||||||
indicatorTitle: '指标',
|
|
||||||
autoWrapText: true,
|
|
||||||
corner: {
|
|
||||||
titleOnDimension: 'row',
|
|
||||||
headerStyle: { autoWrapText: true }
|
|
||||||
},
|
|
||||||
legends: {
|
|
||||||
orient: 'bottom',
|
|
||||||
type: 'discrete',
|
|
||||||
data: [
|
|
||||||
{ label: 'Consumer-Quantity', shape: { fill: '#2E62F1', symbolType: 'circle' } },
|
|
||||||
{ label: 'Consumer-Quantity', shape: { fill: '#4DC36A', symbolType: 'square' } },
|
|
||||||
{ label: 'Home Office-Quantity', shape: { fill: '#FF8406', symbolType: 'square' } },
|
|
||||||
{ label: 'Consumer-Sales', shape: { fill: '#FFCC00', symbolType: 'square' } },
|
|
||||||
{ label: 'Consumer-Sales', shape: { fill: '#4F44CF', symbolType: 'square' } },
|
|
||||||
{ label: 'Home Office-Sales', shape: { fill: '#5AC8FA', symbolType: 'square' } },
|
|
||||||
{ label: 'Consumer-Profit', shape: { fill: '#003A8C', symbolType: 'square' } },
|
|
||||||
{ label: 'Consumer-Profit', shape: { fill: '#B08AE2', symbolType: 'square' } },
|
|
||||||
{ label: 'Home Office-Profit', shape: { fill: '#FF6341', symbolType: 'square' } }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
theme: {
|
|
||||||
bodyStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 0, 1] },
|
|
||||||
headerStyle: { borderColor: 'gray', borderLineWidth: [0, 0, 1, 1], hover: { cellBgColor: '#CCE0FF' } },
|
|
||||||
rowHeaderStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 0], hover: { cellBgColor: '#CCE0FF' } },
|
|
||||||
cornerHeaderStyle: { borderColor: 'gray', borderLineWidth: [0, 1, 1, 0], hover: { cellBgColor: '' } },
|
|
||||||
cornerRightTopCellStyle: { borderColor: 'gray', borderLineWidth: [0, 0, 1, 1], hover: { cellBgColor: '' } },
|
|
||||||
cornerLeftBottomCellStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 0], hover: { cellBgColor: '' } },
|
|
||||||
cornerRightBottomCellStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 0, 1], hover: { cellBgColor: '' } },
|
|
||||||
rightFrozenStyle: { borderColor: 'gray', borderLineWidth: [1, 0, 1, 1], hover: { cellBgColor: '' } },
|
|
||||||
bottomFrozenStyle: { borderColor: 'gray', borderLineWidth: [1, 1, 0, 1], hover: { cellBgColor: '' } },
|
|
||||||
selectionStyle: { cellBgColor: '', cellBorderColor: '' },
|
|
||||||
frameStyle: { borderLineWidth: 0 }
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
const pivotChartRecords = ref({} as any);
|
const pivotChartRecords = ref({} as any);
|
||||||
const handleLegendItemClick = (args: { value: any }) => {
|
const handleLegendItemClick = (args: { value: any }) => {
|
||||||
@ -428,84 +197,15 @@ const handleLegendItemClick = (args: { value: any }) => {
|
|||||||
|
|
||||||
// custom layout list table
|
// custom layout list table
|
||||||
const customLayoutListTableRef = ref(null);
|
const customLayoutListTableRef = ref(null);
|
||||||
const customLayoutListTableOptions = ref({
|
const customLayoutListTableOptions = computed(() => {
|
||||||
defaultRowHeight: 80
|
return {
|
||||||
|
defaultRowHeight: 80,
|
||||||
|
theme: themeStore.darkMode ? VTable.themes.DARK : VTable.themes.DEFAULT
|
||||||
|
};
|
||||||
});
|
});
|
||||||
const customLayoutListTableRecords = ref([
|
const customLayoutListTableRecords = ref(customListRecords);
|
||||||
{
|
|
||||||
bloggerId: 1,
|
|
||||||
bloggerName: 'Virtual Anchor Xiaohua',
|
|
||||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
|
|
||||||
introduction:
|
|
||||||
'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
|
|
||||||
fansCount: 400,
|
|
||||||
worksCount: 10,
|
|
||||||
viewCount: 5,
|
|
||||||
city: 'Dream City',
|
|
||||||
tags: ['game', 'anime', 'food']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
bloggerId: 2,
|
|
||||||
bloggerName: 'Virtual anchor little wolf',
|
|
||||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
|
|
||||||
introduction:
|
|
||||||
'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
|
|
||||||
fansCount: 800,
|
|
||||||
worksCount: 20,
|
|
||||||
viewCount: 15,
|
|
||||||
city: 'City of Music',
|
|
||||||
tags: ['music', 'travel', 'photography']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
bloggerId: 3,
|
|
||||||
bloggerName: 'Virtual anchor bunny',
|
|
||||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
|
|
||||||
introduction:
|
|
||||||
'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
|
|
||||||
fansCount: 600,
|
|
||||||
worksCount: 15,
|
|
||||||
viewCount: 10,
|
|
||||||
city: 'City of Art',
|
|
||||||
tags: ['painting', 'handmade', 'beauty makeup']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
bloggerId: 4,
|
|
||||||
bloggerName: 'Virtual anchor kitten',
|
|
||||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
|
|
||||||
introduction:
|
|
||||||
'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
|
|
||||||
fansCount: 1000,
|
|
||||||
worksCount: 30,
|
|
||||||
viewCount: 20,
|
|
||||||
city: 'Health City',
|
|
||||||
tags: ['dance', 'fitness', 'cooking']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
bloggerId: 5,
|
|
||||||
bloggerName: 'Virtual anchor Bear',
|
|
||||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
|
|
||||||
introduction:
|
|
||||||
'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
|
|
||||||
fansCount: 1200,
|
|
||||||
worksCount: 25,
|
|
||||||
viewCount: 18,
|
|
||||||
city: 'City of Wisdom',
|
|
||||||
tags: ['Movie', 'Literature']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
bloggerId: 6,
|
|
||||||
bloggerName: 'Virtual anchor bird',
|
|
||||||
bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
|
|
||||||
introduction:
|
|
||||||
'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
|
|
||||||
fansCount: 900,
|
|
||||||
worksCount: 12,
|
|
||||||
viewCount: 8,
|
|
||||||
city: 'Happy City',
|
|
||||||
tags: ['music', 'performance', 'variety']
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
const customLayoutListTableColumnStyle = ref({ fontFamily: 'Arial', fontSize: 12, fontWeight: 'bold' });
|
const customLayoutListTableColumnStyle = ref({ fontFamily: 'Arial', fontSize: 12, fontWeight: 'bold' });
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// pivot tablt records
|
// pivot tablt records
|
||||||
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_data.json')
|
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_data.json')
|
||||||
@ -529,7 +229,23 @@ onMounted(() => {
|
|||||||
<div class="h-full">
|
<div class="h-full">
|
||||||
<NSpace vertical :size="16">
|
<NSpace vertical :size="16">
|
||||||
<NCard title="List Table" :bordered="false" class="h-full w-2/3 card-wrapper">
|
<NCard title="List Table" :bordered="false" class="h-full w-2/3 card-wrapper">
|
||||||
<ListTable ref="listTableRef" :options="{}" :records="listRecords" height="400px">
|
<ListTable ref="listTableRef" :options="listOptions" :records="listRecords" height="400px">
|
||||||
|
<ListColumn field="Order ID" title="Order ID" width="auto" />
|
||||||
|
<ListColumn field="Customer ID" title="Customer ID" width="auto" />
|
||||||
|
<ListColumn field="Product Name" title="Product Name" width="auto" />
|
||||||
|
<ListColumn field="Category" title="Category" width="auto" />
|
||||||
|
<ListColumn field="Sub-Category" title="Sub-Category" width="auto" />
|
||||||
|
<ListColumn field="Region" title="Region" width="auto" />
|
||||||
|
<ListColumn field="City" title="City" width="auto" />
|
||||||
|
<ListColumn field="Order Date" title="Order Date" width="auto" />
|
||||||
|
<ListColumn field="Quantity" title="Quantity" width="auto" />
|
||||||
|
<ListColumn field="Sales" title="Sales" width="auto" />
|
||||||
|
<ListColumn field="Profit" title="Profit" width="auto" />
|
||||||
|
</ListTable>
|
||||||
|
</NCard>
|
||||||
|
|
||||||
|
<NCard title="Group Table" :bordered="false" class="h-full w-2/3 card-wrapper">
|
||||||
|
<ListTable ref="groupTableRef" :options="groupOptions" :records="groupRecords" height="400px">
|
||||||
<ListColumn field="Order ID" title="Order ID" width="auto" />
|
<ListColumn field="Order ID" title="Order ID" width="auto" />
|
||||||
<ListColumn field="Customer ID" title="Customer ID" width="auto" />
|
<ListColumn field="Customer ID" title="Customer ID" width="auto" />
|
||||||
<ListColumn field="Product Name" title="Product Name" width="auto" />
|
<ListColumn field="Product Name" title="Product Name" width="auto" />
|
||||||
@ -594,10 +310,10 @@ onMounted(() => {
|
|||||||
height="400px"
|
height="400px"
|
||||||
>
|
>
|
||||||
<!-- Order Number Column -->
|
<!-- Order Number Column -->
|
||||||
<ListColumn field="bloggerId" title="order number" width="100" />
|
<ListColumn field="bloggerId" title="Order Number" width="100" />
|
||||||
|
|
||||||
<!-- Anchor Nickname Column with Custom Layout -->
|
<!-- Anchor Nickname Column with Custom Layout -->
|
||||||
<ListColumn field="bloggerName" title="anchor nickname" :width="330">
|
<ListColumn field="bloggerName" title="Anchor Nickname" :width="330">
|
||||||
<template #customLayout="{ record, height, width }">
|
<template #customLayout="{ record, height, width }">
|
||||||
<Group :height="height" :width="width" display="flex" flex-direction="row" flex-wrap="nowrap">
|
<Group :height="height" :width="width" display="flex" flex-direction="row" flex-wrap="nowrap">
|
||||||
<!-- Avatar Group -->
|
<!-- Avatar Group -->
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user