template

使用template模版方式，类似于自定义渲染，所以所有单元格都不会有默认样式中的padding，用户需要自行设置样式或者使用kita-grid-cell的类名

自定义插槽

源码

<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>

扩展行

源码

<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>

合并单元格

源码

<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>