template
使用template模版方式,类似于自定义渲染,所以所有单元格都不会有默认样式中的padding,用户需要自行设置样式或者使用kita-grid-cell
的类名
自定义插槽
源码
vue
<template>
<GridTable
:list="list"
border
stripe
:showTreeLine="true"
defaultExpandAll
style="width: 100%; height: 600px"
>
<GridTableColumn
v-for="column in columns"
v-bind="column"
:key="column.field"
resizable
:minWidth="100"
:maxWidth="300"
>
<template #default="{ row, column }"> cell: {{ row[column.field] }} </template>
<template #header="{ column }"> header: {{ column.field }} </template>
</GridTableColumn>
<template #empty>暂无数据</template>
</GridTable>
</template>
<script lang="ts" setup>
import { GridTable, GridTableColumn, type Column, type ListItem } from 'kita-grid';
// const list = ref([{ id: '112', name: 'sdf', state: 'success', child: 'child', col4: 'col4', children: [{ id: '113', name: 'sdf', state: 'success', child: 'child', col4: 'col4', }] }]);
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
field: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 200,
}));
const generateList = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.field] = `Row ${rowIndex} - Col ${columnIndex}`;
return rowData;
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
},
);
});
const columns: Column[] = [
{ type: 'index', width: 50, fixed: 'left', index: (index: number) => {} },
...generateColumns(20),
{ type: 'index', width: 50, fixed: 'right' },
{ type: 'checkbox', width: 50, fixed: 'right' },
];
const list: ListItem[] = generateList(columns, 5000);
</script>
<style lang="scss" scoped></style>
扩展行
源码
vue
<template>
<GridTable
:list="list"
border
stripe
:showTreeLine="true"
defaultExpandAll
style="width: 100%; height: 600px"
>
<GridTableColumn
id="expand"
key="expand"
field="expand"
fixed="left"
:type="ColumnType.Expand"
:width="50"
>
<template #default="{ row }"> expand row {{ row.key }} </template>
</GridTableColumn>
<GridTableColumn v-for="column in columns" v-bind="column" :key="column.field">
<template #default="{ row, column }"> cell: {{ row[column.field] }} </template>
<template #header="{ column }"> header: {{ column.field }} </template>
</GridTableColumn>
<template #empty>暂无数据</template>
</GridTable>
</template>
<script lang="ts" setup>
import { GridTable, GridTableColumn, type Column, type ListItem, ColumnType } from 'kita-grid';
const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
Array.from({ length }).map((_, columnIndex) => ({
...props,
field: `${prefix}${columnIndex}`,
title: `Column ${columnIndex}`,
width: 200,
}));
const generateList = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
Array.from({ length }).map((_, rowIndex) => {
return columns.reduce(
(rowData, column, columnIndex) => {
rowData[column.field] = `Row ${rowIndex} - Col ${columnIndex}`;
return rowData;
},
{
id: `${prefix}${rowIndex}`,
parentId: null,
},
);
});
const columns: Column[] = [
...generateColumns(20),
{ type: 'index', width: 50, fixed: 'right' },
{ type: 'checkbox', width: 50, fixed: 'right' },
];
const list: ListItem[] = generateList(columns, 5000);
</script>
<style lang="scss" scoped></style>
合并单元格
源码
vue
<template>
<GridTable :list="list" border stripe :showTreeLine="true" defaultExpandAll :merges="merges">
<GridTableColumn key="1" field="field1" :width="100" :type="ColumnType.Text" title="field1" />
<GridTableColumn key="2" field="field2" :width="100" :type="ColumnType.Text" title="field2">
<GridTableColumn key="3" field="field3" :width="100" :type="ColumnType.Text" title="field3" />
</GridTableColumn>
<GridTableColumn key="4" field="field4" :width="100" :type="ColumnType.Text" title="field4" />
</GridTable>
</template>
<script setup lang="ts">
import { GridTable, GridTableColumn, type ListItem, ColumnType } from 'kita-grid';
const list: ListItem[] = [
{
id: '1',
field1: '11',
field2: '12',
field3: '13',
field4: '14',
},
{
id: '2',
field1: '21',
field2: '22',
field3: '23',
field4: '24',
},
{
id: '3',
field1: '31',
field2: '32',
field3: '33',
field4: '34',
},
{
id: '4',
field1: '41',
field2: '42',
field3: '43',
field4: '44',
},
];
const merges = [
{
rowIndex: 0,
colIndex: 0,
rowspan: 2,
colspan: 2,
},
{
rowIndex: 2,
colIndex: 1,
rowspan: 1,
colspan: 2,
},
];
</script>