树形结构- 有样式bug,待处理
基础示例
源码
vue
<template>
<div class="base-view">
<div style="width: 100%; height: 600px; border: 2px solid var(--color-border)">
<Grid :columns="columns" :list="list" defaultExpandAll border></Grid>
</div>
</div>
</template>
<script setup lang="ts">
import { Grid, type Column, type ListItem, ColumnType } from 'kita-grid';
const columns: Column[] = [];
for (let i = 0; i < 10; i++) {
columns.push({
field: `key${i}`,
title: `title${i}`,
type: i === 0 ? ColumnType.Title : ColumnType.Text,
width: i == 0 ? 400 : 200,
});
}
const list: ListItem[] = [];
for (let i = 0; i < 1000; i++) {
const item = {
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);
if (i === 1 || i === 2) {
item.children = [
{
id: `${i}-children`,
key0: `row${i}-children-key`,
key1: `row${i}-children-key1`,
key2: `row${i}-children-key2`,
key3: `row${i}-children-key3`,
key4: `row${i}-children-key4`,
key5: `row${i}-children-key5`,
key6: `row${i}-children-key6`,
key7: `row${i}-children-key7`,
key8: `row${i}-children-key8`,
key9: `row${i}-children-key9`,
key10: `row${i}-children-key10`,
key11: `row${i}-children-key11`,
key12: `row${i}-children-key12`,
children: [
{
id: `${i}-children111`,
key0: `row${i}-children-key`,
key1: `row${i}-children-key1`,
key2: `row${i}-children-key2`,
key3: `row${i}-children-key3`,
key4: `row${i}-children-key4`,
key5: `row${i}-children-key5`,
key6: `row${i}-children-key6`,
key7: `row${i}-children-key7`,
key8: `row${i}-children-key8`,
key9: `row${i}-children-key9`,
key10: `row${i}-children-key10`,
key11: `row${i}-children-key11`,
key12: `row${i}-children-key12`,
},
{
id: `${i}-children111222`,
key0: `row${i}-children-key`,
key1: `row${i}-children-key1`,
key2: `row${i}-children-key2`,
key3: `row${i}-children-key3`,
key4: `row${i}-children-key4`,
key5: `row${i}-children-key5`,
key6: `row${i}-children-key6`,
key7: `row${i}-children-key7`,
key8: `row${i}-children-key8`,
key9: `row${i}-children-key9`,
key10: `row${i}-children-key10`,
key11: `row${i}-children-key11`,
key12: `row${i}-children-key12`,
},
],
},
{
id: `${i}-children1`,
key0: `row${i}-children-key`,
key1: `row${i}-children-key1`,
key2: `row${i}-children-key2`,
key3: `row${i}-children-key3`,
key4: `row${i}-children-key4`,
key5: `row${i}-children-key5`,
key6: `row${i}-children-key6`,
key7: `row${i}-children-key7`,
key8: `row${i}-children-key8`,
key9: `row${i}-children-key9`,
key10: `row${i}-children-key10`,
key11: `row${i}-children-key11`,
key12: `row${i}-children-key12`,
},
];
}
}
</script>
<style lang="scss">
.base-view {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
</style>
带提示线
源码
vue
<template>
<div class="base-view">
<div style="width: 100%; height: 600px; border: 2px solid var(--color-border)">
<Grid :columns="columns" :list="list" defaultExpandAll border show-tree-line></Grid>
</div>
</div>
</template>
<script setup lang="ts">
import { Grid, type Column, type ListItem, ColumnType } from 'kita-grid';
const columns: Column[] = [];
for (let i = 0; i < 10; i++) {
columns.push({
field: `key${i}`,
title: `title${i}`,
type: i === 0 ? ColumnType.Title : ColumnType.Text,
width: i == 0 ? 400 : 200,
});
}
const list: ListItem[] = [];
for (let i = 0; i < 1000; i++) {
const item = {
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);
if (i === 1 || i === 2) {
item.children = [
{
id: `${i}-children`,
key0: `row${i}-children-key`,
key1: `row${i}-children-key1`,
key2: `row${i}-children-key2`,
key3: `row${i}-children-key3`,
key4: `row${i}-children-key4`,
key5: `row${i}-children-key5`,
key6: `row${i}-children-key6`,
key7: `row${i}-children-key7`,
key8: `row${i}-children-key8`,
key9: `row${i}-children-key9`,
key10: `row${i}-children-key10`,
key11: `row${i}-children-key11`,
key12: `row${i}-children-key12`,
children: [
{
id: `${i}-children111`,
key0: `row${i}-children-key`,
key1: `row${i}-children-key1`,
key2: `row${i}-children-key2`,
key3: `row${i}-children-key3`,
key4: `row${i}-children-key4`,
key5: `row${i}-children-key5`,
key6: `row${i}-children-key6`,
key7: `row${i}-children-key7`,
key8: `row${i}-children-key8`,
key9: `row${i}-children-key9`,
key10: `row${i}-children-key10`,
key11: `row${i}-children-key11`,
key12: `row${i}-children-key12`,
},
{
id: `${i}-children111222`,
key0: `row${i}-children-key`,
key1: `row${i}-children-key1`,
key2: `row${i}-children-key2`,
key3: `row${i}-children-key3`,
key4: `row${i}-children-key4`,
key5: `row${i}-children-key5`,
key6: `row${i}-children-key6`,
key7: `row${i}-children-key7`,
key8: `row${i}-children-key8`,
key9: `row${i}-children-key9`,
key10: `row${i}-children-key10`,
key11: `row${i}-children-key11`,
key12: `row${i}-children-key12`,
},
],
},
// FIXME: 有bug,样式判断的不对
// {
// id: `${i}-children1`,
// key0: `row${i}-children-key`,
// key1: `row${i}-children-key1`,
// key2: `row${i}-children-key2`,
// key3: `row${i}-children-key3`,
// key4: `row${i}-children-key4`,
// key5: `row${i}-children-key5`,
// key6: `row${i}-children-key6`,
// key7: `row${i}-children-key7`,
// key8: `row${i}-children-key8`,
// key9: `row${i}-children-key9`,
// key10: `row${i}-children-key10`,
// key11: `row${i}-children-key11`,
// key12: `row${i}-children-key12`,
// },
];
}
}
</script>
<style lang="scss">
.base-view {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
</style>