展开行

基础示例

源码

<template>
  <div class="base-view">
    <div style="width: 100%; height: 600px; border: 2px solid var(--color-border)">
      <Grid :columns="columns" :list="list"></Grid>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { Grid, type Column, type ListItem, ColumnType } from 'kita-grid';

const columns: Column[] = [
  {
    title: '',
    field: '',
    type: ColumnType.Expand,
    width: 50,
    bodyRender: (column, row) => {
      return (
        <div>
          <p>展开行包含子表格</p>
          <Grid
            columns={[
              {
                id: 'index-0',
                type: ColumnType.Index,
                width: 50,
              } as any,
              {
                id: 'index-1',
                field: 'name',
                title: `Name`,
                type: ColumnType.Text,
                width: 100,
              },
              {
                id: 'index-2',
                field: 'attribute',
                title: `Attribute`,
                type: ColumnType.Text,
                width: 100,
              },
            ]}
            list={[
              {
                id: '1',
                name: 'aaa',
                attribute: 'bbb',
              },
              {
                id: '2',
                name: 'bbb',
                attribute: 'ccc',
              },
            ]}
            border
          ></Grid>
        </div>
      ) as any;
    },
  },
];

for (let i = 0; i < 8; i++) {
  columns.push({
    field: `key${i}`,
    title: `title${i}`,
    type: ColumnType.Text,
    width: 120,
  });
}

const list: ListItem[] = [];
for (let i = 0; i < 100; i++) {
  const item: ListItem = {
    id: i.toString(),
    key0: `row${i}-key`,
    key1: `row${i}-key1`,
    key2: `row${i}-key2`,
    key3: `row${i}-key3`,
    key4: `row${i}-key4`,
    key5: `row${i}-key5`,
    key6: `row${i}-key6`,
    key7: `row${i}-key7`,
    key8: `row${i}-key8`,
    key9: `row${i}-key9`,
    key10: `row${i}-key10`,
    key11: `row${i}-key11`,
    key12: `row${i}-key12`,
    children: [] as any[],
  };
  list.push(item);
}
</script>
<style lang="scss">
.base-view {
  width: 100%;
  height: 100%;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

默认展开所有行

使用 default-expand-all 即可默认展开所有

源码

<template>
  <div class="base-view">
    <div style="width: 100%; height: 600px; border: 2px solid var(--color-border)">
      <Grid :columns="columns" :list="list" default-expand-all></Grid>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { Grid, type Column, type ListItem, ColumnType } from 'kita-grid';
import type { VNode } from 'vue';

const columns: Column[] = [
  {
    title: '',
    field: '',
    type: ColumnType.Expand,
    width: 50,
    bodyRender: (column, row) => {
      return (
        <div>
          <p>展开行包含子表格</p>
          <Grid
            columns={[
              {
                id: 'index-0',
                type: ColumnType.Index,
                width: 50,
              } as any,
              {
                id: 'index-1',
                field: 'name',
                title: `Name`,
                type: ColumnType.Text,
                width: 100,
              },
              {
                id: 'index-2',
                field: 'attribute',
                title: `Attribute`,
                type: ColumnType.Text,
                width: 100,
              },
            ]}
            list={[
              {
                id: '1',
                name: 'aaa',
                attribute: 'bbb',
              },
              {
                id: '2',
                name: 'bbb',
                attribute: 'ccc',
              },
            ]}
            border
          ></Grid>
        </div>
      ) as any;
    },
  },
];

for (let i = 0; i < 8; i++) {
  columns.push({
    field: `key${i}`,
    title: `title${i}`,
    type: ColumnType.Text,
    width: 120,
  });
}

const list: ListItem[] = [];
for (let i = 0; i < 100; i++) {
  const item: ListItem = {
    id: i.toString(),
    key0: `row${i}-key`,
    key1: `row${i}-key1`,
    key2: `row${i}-key2`,
    key3: `row${i}-key3`,
    key4: `row${i}-key4`,
    key5: `row${i}-key5`,
    key6: `row${i}-key6`,
    key7: `row${i}-key7`,
    key8: `row${i}-key8`,
    key9: `row${i}-key9`,
    key10: `row${i}-key10`,
    key11: `row${i}-key11`,
    key12: `row${i}-key12`,
    children: [] as any[],
  };
  list.push(item);
}
</script>
<style lang="scss">
.base-view {
  width: 100%;
  height: 100%;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}
</style>