@a2simcode/ui 0.0.68 → 0.0.69

package/docs/components/table.md

@@ -125,6 +125,19 @@
   </template>
 </Demo>
 
+## 树形异步数据加载（懒加载）
+
+当数据量较大时，可以将记录的 `children` 设置为 `true` 作为懒加载标识；展开该行时，组件会调用 `loadChildren(record)` 异步获取子节点并写入。
+
+<Demo :source-code="tableTreeLazyCode">
+  <template #source>
+    <table-tree-lazy />
+  </template>
+  <template #description>
+    设置 <code>isTree</code> 并在某些行上标记 <code>children: true</code>。展开时将调用 <code>loadChildren(record)</code> 获取并填充该行的子节点。
+  </template>
+</Demo>
+
 ## 子表
 
 通过 `subColumns` 属性配置子表列信息（Master-Detail）。
@@ -272,6 +285,7 @@ import TableFrozenColumn from '../examples/table/frozen-column.vue'
 import TableHeightMode from '../examples/table/height-mode.vue'
 import TableTreeColumn from '../examples/table/tree-column.vue'
 import TableTreeData from '../examples/table/tree-data.vue'
+import TableTreeLazy from '../examples/table/tree-lazy.vue'
 import TableSubTable from '../examples/table/sub-table.vue'
 import TableSubTableLazy from '../examples/table/sub-table-lazy.vue'
 import TableMultiple from '../examples/table/multiple.vue'
@@ -292,6 +306,7 @@ import tableFrozenColumnCode from '../examples/table/frozen-column.vue?raw'
 import tableHeightModeCode from '../examples/table/height-mode.vue?raw'
 import tableTreeColumnCode from '../examples/table/tree-column.vue?raw'
 import tableTreeDataCode from '../examples/table/tree-data.vue?raw'
+import tableTreeLazyCode from '../examples/table/tree-lazy.vue?raw'
 import tableSubTableCode from '../examples/table/sub-table.vue?raw'
 import tableSubTableLazyCode from '../examples/table/sub-table-lazy.vue?raw'
 import tableMultipleCode from '../examples/table/multiple.vue?raw'

package/docs/examples/table/tree-lazy.vue

@@ -0,0 +1,80 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table
+      :columns="columns"
+      :records="records"
+      is-tree
+      :load-children="loadChildren"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'category',
+    config: {
+      label: '类别',
+      width: 200,
+    },
+  },
+  {
+    id: 'amount',
+    config: {
+      label: '销售额',
+      width: 'auto',
+    },
+  },
+  {
+    id: 'profit',
+    config: {
+      label: '利润',
+      width: 120,
+    },
+  },
+])
+
+const records = ref([
+  {
+    category: '办公用品',
+    amount: '129.70',
+    profit: '-60.70',
+    children: [
+      { category: '信封', amount: '125.44', profit: '42.56' },
+      { category: '器具', amount: '1375.92', profit: '550.2' },
+    ],
+  },
+  {
+    category: '技术',
+    amount: '229.70',
+    profit: '90.70',
+    children: true,
+  },
+  {
+    category: '家具',
+    amount: '329.00',
+    profit: '120.30',
+    children: [
+      { category: '桌子', amount: '125.44', profit: '42.56' },
+      { category: '椅子', amount: '1375.92', profit: '550.2' },
+    ],
+  },
+])
+
+const delay = (ms: number) => new Promise((r) => setTimeout(r, ms))
+
+const loadChildren = async (record: any) => {
+  await delay(600)
+  if (record.category === '技术') {
+    return [
+      { category: '设备', amount: '225.44', profit: '462.56' },
+      { category: '配件', amount: '375.92', profit: '550.2' },
+      { category: '电话', amount: '175.92', profit: '750.2' },
+    ]
+  }
+  return []
+}
+</script>
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",