@a2simcode/ui 0.0.84 → 0.0.86

package/docs/components/table.md

@@ -1,319 +1,319 @@
-# Table 表格
-
-基于字节 VTable 的高性能表格组件,用于展示大量结构化数据。
-
-## 基础用法
-
-基础的表格展示用法。
-
-<Demo :source-code="tableBasicCode">
-  <template #source>
-    <table-basic />
-  </template>
-  <template #description>
-    通过 `columns` 属性配置表格列,通过 `records` 属性设置表格数据。
-  </template>
-</Demo>
-
-## Tag 标签
-
-通过列类型 `j-input-tag`（或 `j-tag`）配合 `getObjectList` 映射数据，渲染出类似“标签/胶囊”的效果。
-
-<Demo :source-code="tableTagCode">
-  <template #source>
-    <table-tag />
-  </template>
-  <template #description>
-    示例里通过注入 `jcode_app_provide` 提供 `getObjectList`，返回 `{ value,label,color }` 列表用于渲染。
-    其中 `color` 为背景色，设置 `color` 后会自动根据背景色亮度计算 `textColor`（黑/白），无需手动指定。
-  </template>
-</Demo>
-
-## Icon 图标
-
-通过列类型 `j-icon` 可以渲染 SVG 图标。支持传入 SVG 字符串或 Iconify 图标名称。
-
-<Demo :source-code="tableIconCode">
-  <template #source>
-    <table-icon />
-  </template>
-  <template #description>
-    在 `columns` 中设置 `type: 'j-icon'`。数据可以是 SVG 字符串，也可以是 Iconify 图标名称（如 `mdi:home`）。
-    可以通过 `config.size` 设置图标大小，`config.color` 设置图标颜色。
-  </template>
-</Demo>
-
-## Link 链接
-
-通过列类型 `link` 可以渲染链接，并支持点击事件。
-
-<Demo :source-code="tableLinkCode">
-  <template #source>
-    <table-link />
-  </template>
-  <template #description>
-    在 `columns` 中设置 `type: 'link'`。
-    通过 `config.click` 设置点击回调函数，参数为 `{ row, column, e, openLayer }`。
-  </template>
-</Demo>
-
-## 自定义布局
-
-通过列配置中的 `customLayout` 属性，可以使用 VTable 的 CustomLayout 功能自定义单元格渲染。
-
-<Demo :source-code="tableCustomLayoutCode">
-  <template #source>
-    <table-custom-layout />
-  </template>
-  <template #description>
-    在列对象中定义 `customLayout` 函数。该函数接收 `args` 参数，其中包含 `customLayout` 类（VTable.CustomLayout），可用于创建 Group, Text, Image 等布局元素。
-    函数需要返回 `{ rootContainer, renderDefault: false }`。
-  </template>
-</Demo>
-
-## 冻结列
-
-通过 `columns` 中的 `config.frozen` 属性设置列的冻结方式，支持 `left`（左侧冻结）和 `right`（右侧冻结）。
-
-> 注意：在列组合（树形表头）中，如果子列设置了冻结属性，则包含该子列的整个父列组都会被冻结。
-
-<Demo :source-code="tableFrozenColumnCode">
-  <template #source>
-    <table-frozen-column />
-  </template>
-  <template #description>
-    设置 `frozen: 'left'` 或 `frozen: 'right'` 来冻结列。
-  </template>
-</Demo>
-
-## 高度模式
-
-通过 `heightMode` 属性控制表格高度模式，支持 `full` (充满父容器) 和 `auto` (内容自适应)。当设置为 `auto` 时，可通过 `maxHeight` 设置最大高度。
-
-<Demo :source-code="tableHeightModeCode">
-  <template #source>
-    <table-height-mode />
-  </template>
-  <template #description>
-    切换 `heightMode` 查看不同高度模式的效果。当 `heightMode` 为 `auto` 且设置了 `maxHeight` 时，超过最大高度会出现滚动条。
-  </template>
-</Demo>
-
-## 列组合
-
-通过在 `columns` 中嵌套 `children` 属性，可以实现多级表头（树形结构列配置）。
-
-<Demo :source-code="tableTreeColumnCode">
-  <template #source>
-    <table-tree-column />
-  </template>
-  <template #description>
-    在 `columns` 中嵌套 `children` 来声明分组。
-  </template>
-</Demo>
-
-## 树形展示
-
-通过 `isTree` 属性开启树形展示。
-
-<Demo :source-code="tableTreeDataCode">
-  <template #source>
-    <table-tree-data />
-  </template>
-  <template #description>
-    设置 `isTree` 为 `true` 开启树形展示，第一列会自动显示展开/折叠图标。
-  </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）。
-
-<Demo :source-code="tableSubTableCode">
-  <template #source>
-    <table-sub-table />
-  </template>
-  <template #description>
-    传入 `subColumns` 数组配置子表列，配置格式与 `columns` 一致。
-    默认情况下，插件会查找记录中的 `children` 字段作为子表数据。
-    
-    此外，还可以通过以下属性控制子表行为：
-    - `isSubShowNumber`: 是否显示子表序号，默认为 `true`。
-    - `subActions`: 配置子表行内操作按钮，格式与 `actions` 一致。
-  </template>
-</Demo>
-
-## 子表异步数据加载（懒加载）
-
-当子表数据量较大时，可以将主表记录的 `children` 设置为 `true` 作为“需要懒加载”的标识；在用户展开该行时，组件会调用 `loadChildren(record)` 异步获取子表数据，并自动写入并展开。
-
-- 触发条件：展开行且 `originData.children === true`
-- 成功后：会把返回的数组设置为该行的子数据（下次再展开不会重复请求）
-
-<Demo :source-code="tableSubTableLazyCode">
-  <template #source>
-    <table-sub-table-lazy />
-  </template>
-  <template #description>
-    将主表行的 <code>children</code> 设置为 <code>true</code> 作为懒加载标识；展开该行时会调用 <code>loadChildren(record)</code> 获取子表数据并写入。
-  </template>
-</Demo>
-
-## 多选
-
-通过 `isMultiple` 属性开启多选。
-<Demo :source-code="tableMultipleCode">
-<template #source>
-<table-multiple />
-</template>
-<template #description>
-设置 `isMultiple` 为 `true` 开启多选，表格第一列会显示勾选框。
-</template>
-</Demo>
-
-## 单选获取选中行
-
-在非多选模式下，可以通过 `selectionChanged` 事件或 `getSelection` 方法获取当前选中的行数据。
-
-<Demo :source-code="tableSingleSelectionCode">
-  <template #source>
-    <table-single-selection />
-  </template>
-  <template #description>
-    默认情况下（`isMultiple` 为 `false`），点击表格行会触发 `selectionChanged` 事件。
-  </template>
-</Demo>
-
-## 字段控制选中状态
-
-通过 `selectField` 属性绑定选中状态字段。
-<Demo :source-code="tableFieldSelectionCode">
-<template #source>
-<table-field-selection />
-</template>
-<template #description>
-设置 `selectField` 属性，表格会根据数据中的该字段来渲染选中状态。
-</template>
-</Demo>
-
-## 分页
-
-通过 `isPage` 属性开启分页功能。
-
-<Demo :source-code="tablePaginationCode">
-  <template #source>
-    <table-pagination />
-  </template>
-  <template #description>
-    设置 `isPage` 为 `true` 开启分页，通过 `v-model:table-page` 和 `v-model:page-size` 绑定当前页码和每页显示数量，监听 `loadPageData` 事件来加载对应页的数据。
-  </template>
-</Demo>
-
-## 行内操作按钮
-
-通过 `actions` 属性配置行内操作按钮。
-
-<Demo :source-code="tableActionsCode">
-  <template #source>
-    <table-actions />
-  </template>
-  <template #description>
-    通过 `actions` 属性传入按钮配置数组，每个按钮需要配置 `id`（唯一标识）、`label`（显示文本）、`click`（点击回调函数）。可选配置 `color` 自定义按钮颜色。操作列宽度自动计算，默认最多显示3个按钮，超出部分收纳到"更多"下拉菜单中。可通过 `actionsMaxCount` 设置最大显示数量，`actionsLabel` 设置操作列标题。
-  </template>
-</Demo>
-
-## 单元格编辑
-
-通过在列配置中设置 `editor` 属性启用单元格编辑功能。
-
-<Demo :source-code="tableEditableCode">
-  <template #source>
-    <table-editable />
-  </template>
-  <template #description>
-    在列配置的 `config` 中设置 `editor: true` 启用编辑功能，点击单元格即可进入编辑模式。支持多种编辑器类型：
-    <ul>
-      <li><code>j-input</code> - 文本输入框</li>
-      <li><code>j-number</code> - 数字输入框</li>
-      <li><code>j-select</code> - 下拉选择器</li>
-      <li><code>j-radio</code> - 单选框</li>
-      <li><code>j-checkbox</code> - 复选框</li>
-      <li><code>j-switch</code> - 开关</li>
-      <li>以及其他 j-input 开头的输入组件</li>
-    </ul>
-    通过监听 <code>cell-change</code> 事件可以获取单元格值的变化。
-  </template>
-</Demo>
-
-## 添加数据
-
-通过 `editConfig` 属性配置 `isAddBtn` 为 `true` 来显示添加按钮。
-
-<Demo :source-code="tableAddRowCode">
-  <template #source>
-    <table-add-row />
-  </template>
-  <template #description>
-    设置 `editConfig` 的 `isAddBtn` 为 `true` 开启添加按钮，可通过 `addBtnText` 自定义按钮文本。点击添加按钮会触发 `add` 事件，并自动在表格中插入一行新数据（使用列配置中的 `defaultValue`）。
-  </template>
-</Demo>
-
-## API
-
-<ApiTable :data="tableApi" componentName="table" />
-
-<script setup>
-import TableBasic from '../examples/table/basic.vue'
-import TableTag from '../examples/table/tag.vue'
-import TableIcon from '../examples/table/icon.vue'
-import TableLink from '../examples/table/link.vue'
-import TableCustomLayout from '../examples/table/custom-layout.vue'
-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'
-import TableSingleSelection from '../examples/table/single-selection.vue'
-import TableFieldSelection from '../examples/table/field-selection.vue'
-import TablePagination from '../examples/table/pagination.vue'
-import TableActions from '../examples/table/actions.vue'
-import TableEditable from '../examples/table/editable.vue'
-import TableAddRow from '../examples/table/add-row.vue'
-import tableApi from './meta/table'
-
-import tableBasicCode from '../examples/table/basic.vue?raw'
-import tableTagCode from '../examples/table/tag.vue?raw'
-import tableIconCode from '../examples/table/icon.vue?raw'
-import tableLinkCode from '../examples/table/link.vue?raw'
-import tableCustomLayoutCode from '../examples/table/custom-layout.vue?raw'
-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'
-import tableSingleSelectionCode from '../examples/table/single-selection.vue?raw'
-import tableFieldSelectionCode from '../examples/table/field-selection.vue?raw'
-import tablePaginationCode from '../examples/table/pagination.vue?raw'
-import tableActionsCode from '../examples/table/actions.vue?raw'
-import tableEditableCode from '../examples/table/editable.vue?raw'
-import tableAddRowCode from '../examples/table/add-row.vue?raw'
-</script>
+# Table 表格
+
+基于字节 VTable 的高性能表格组件,用于展示大量结构化数据。
+
+## 基础用法
+
+基础的表格展示用法。
+
+<Demo :source-code="tableBasicCode">
+  <template #source>
+    <table-basic />
+  </template>
+  <template #description>
+    通过 `columns` 属性配置表格列,通过 `records` 属性设置表格数据。
+  </template>
+</Demo>
+
+## Tag 标签
+
+通过列类型 `j-input-tag`（或 `j-tag`）配合 `getObjectList` 映射数据，渲染出类似“标签/胶囊”的效果。
+
+<Demo :source-code="tableTagCode">
+  <template #source>
+    <table-tag />
+  </template>
+  <template #description>
+    示例里通过注入 `jcode_app_provide` 提供 `getObjectList`，返回 `{ value,label,color }` 列表用于渲染。
+    其中 `color` 为背景色，设置 `color` 后会自动根据背景色亮度计算 `textColor`（黑/白），无需手动指定。
+  </template>
+</Demo>
+
+## Icon 图标
+
+通过列类型 `j-icon` 可以渲染 SVG 图标。支持传入 SVG 字符串或 Iconify 图标名称。
+
+<Demo :source-code="tableIconCode">
+  <template #source>
+    <table-icon />
+  </template>
+  <template #description>
+    在 `columns` 中设置 `type: 'j-icon'`。数据可以是 SVG 字符串，也可以是 Iconify 图标名称（如 `mdi:home`）。
+    可以通过 `config.size` 设置图标大小，`config.color` 设置图标颜色。
+  </template>
+</Demo>
+
+## Link 链接
+
+通过列类型 `link` 可以渲染链接，并支持点击事件。
+
+<Demo :source-code="tableLinkCode">
+  <template #source>
+    <table-link />
+  </template>
+  <template #description>
+    在 `columns` 中设置 `type: 'link'`。
+    通过 `config.click` 设置点击回调函数，参数为 `{ row, column, e, openLayer }`。
+  </template>
+</Demo>
+
+## 自定义布局
+
+通过列配置中的 `customLayout` 属性，可以使用 VTable 的 CustomLayout 功能自定义单元格渲染。
+
+<Demo :source-code="tableCustomLayoutCode">
+  <template #source>
+    <table-custom-layout />
+  </template>
+  <template #description>
+    在列对象中定义 `customLayout` 函数。该函数接收 `args` 参数，其中包含 `customLayout` 类（VTable.CustomLayout），可用于创建 Group, Text, Image 等布局元素。
+    函数需要返回 `{ rootContainer, renderDefault: false }`。
+  </template>
+</Demo>
+
+## 冻结列
+
+通过 `columns` 中的 `config.frozen` 属性设置列的冻结方式，支持 `left`（左侧冻结）和 `right`（右侧冻结）。
+
+> 注意：在列组合（树形表头）中，如果子列设置了冻结属性，则包含该子列的整个父列组都会被冻结。
+
+<Demo :source-code="tableFrozenColumnCode">
+  <template #source>
+    <table-frozen-column />
+  </template>
+  <template #description>
+    设置 `frozen: 'left'` 或 `frozen: 'right'` 来冻结列。
+  </template>
+</Demo>
+
+## 高度模式
+
+通过 `heightMode` 属性控制表格高度模式，支持 `full` (充满父容器) 和 `auto` (内容自适应)。当设置为 `auto` 时，可通过 `maxHeight` 设置最大高度。
+
+<Demo :source-code="tableHeightModeCode">
+  <template #source>
+    <table-height-mode />
+  </template>
+  <template #description>
+    切换 `heightMode` 查看不同高度模式的效果。当 `heightMode` 为 `auto` 且设置了 `maxHeight` 时，超过最大高度会出现滚动条。
+  </template>
+</Demo>
+
+## 列组合
+
+通过在 `columns` 中嵌套 `children` 属性，可以实现多级表头（树形结构列配置）。
+
+<Demo :source-code="tableTreeColumnCode">
+  <template #source>
+    <table-tree-column />
+  </template>
+  <template #description>
+    在 `columns` 中嵌套 `children` 来声明分组。
+  </template>
+</Demo>
+
+## 树形展示
+
+通过 `isTree` 属性开启树形展示。
+
+<Demo :source-code="tableTreeDataCode">
+  <template #source>
+    <table-tree-data />
+  </template>
+  <template #description>
+    设置 `isTree` 为 `true` 开启树形展示，第一列会自动显示展开/折叠图标。
+  </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）。
+
+<Demo :source-code="tableSubTableCode">
+  <template #source>
+    <table-sub-table />
+  </template>
+  <template #description>
+    传入 `subColumns` 数组配置子表列，配置格式与 `columns` 一致。
+    默认情况下，插件会查找记录中的 `children` 字段作为子表数据。
+    
+    此外，还可以通过以下属性控制子表行为：
+    - `isSubShowNumber`: 是否显示子表序号，默认为 `true`。
+    - `subActions`: 配置子表行内操作按钮，格式与 `actions` 一致。
+  </template>
+</Demo>
+
+## 子表异步数据加载（懒加载）
+
+当子表数据量较大时，可以将主表记录的 `children` 设置为 `true` 作为“需要懒加载”的标识；在用户展开该行时，组件会调用 `loadChildren(record)` 异步获取子表数据，并自动写入并展开。
+
+- 触发条件：展开行且 `originData.children === true`
+- 成功后：会把返回的数组设置为该行的子数据（下次再展开不会重复请求）
+
+<Demo :source-code="tableSubTableLazyCode">
+  <template #source>
+    <table-sub-table-lazy />
+  </template>
+  <template #description>
+    将主表行的 <code>children</code> 设置为 <code>true</code> 作为懒加载标识；展开该行时会调用 <code>loadChildren(record)</code> 获取子表数据并写入。
+  </template>
+</Demo>
+
+## 多选
+
+通过 `isMultiple` 属性开启多选。
+<Demo :source-code="tableMultipleCode">
+<template #source>
+<table-multiple />
+</template>
+<template #description>
+设置 `isMultiple` 为 `true` 开启多选，表格第一列会显示勾选框。
+</template>
+</Demo>
+
+## 单选获取选中行
+
+在非多选模式下，可以通过 `selectionChanged` 事件或 `getSelection` 方法获取当前选中的行数据。
+
+<Demo :source-code="tableSingleSelectionCode">
+  <template #source>
+    <table-single-selection />
+  </template>
+  <template #description>
+    默认情况下（`isMultiple` 为 `false`），点击表格行会触发 `selectionChanged` 事件。
+  </template>
+</Demo>
+
+## 字段控制选中状态
+
+通过 `selectField` 属性绑定选中状态字段。
+<Demo :source-code="tableFieldSelectionCode">
+<template #source>
+<table-field-selection />
+</template>
+<template #description>
+设置 `selectField` 属性，表格会根据数据中的该字段来渲染选中状态。
+</template>
+</Demo>
+
+## 分页
+
+通过 `isPage` 属性开启分页功能。
+
+<Demo :source-code="tablePaginationCode">
+  <template #source>
+    <table-pagination />
+  </template>
+  <template #description>
+    设置 `isPage` 为 `true` 开启分页，通过 `v-model:table-page` 和 `v-model:page-size` 绑定当前页码和每页显示数量，监听 `loadPageData` 事件来加载对应页的数据。
+  </template>
+</Demo>
+
+## 行内操作按钮
+
+通过 `actions` 属性配置行内操作按钮。
+
+<Demo :source-code="tableActionsCode">
+  <template #source>
+    <table-actions />
+  </template>
+  <template #description>
+    通过 `actions` 属性传入按钮配置数组，每个按钮需要配置 `id`（唯一标识）、`label`（显示文本）、`click`（点击回调函数）。可选配置 `color` 自定义按钮颜色。操作列宽度自动计算，默认最多显示3个按钮，超出部分收纳到"更多"下拉菜单中。可通过 `actionsMaxCount` 设置最大显示数量，`actionsLabel` 设置操作列标题。
+  </template>
+</Demo>
+
+## 单元格编辑
+
+通过在列配置中设置 `editor` 属性启用单元格编辑功能。
+
+<Demo :source-code="tableEditableCode">
+  <template #source>
+    <table-editable />
+  </template>
+  <template #description>
+    在列配置的 `config` 中设置 `editor: true` 启用编辑功能，点击单元格即可进入编辑模式。支持多种编辑器类型：
+    <ul>
+      <li><code>j-input</code> - 文本输入框</li>
+      <li><code>j-number</code> - 数字输入框</li>
+      <li><code>j-select</code> - 下拉选择器</li>
+      <li><code>j-radio</code> - 单选框</li>
+      <li><code>j-checkbox</code> - 复选框</li>
+      <li><code>j-switch</code> - 开关</li>
+      <li>以及其他 j-input 开头的输入组件</li>
+    </ul>
+    通过监听 <code>cell-change</code> 事件可以获取单元格值的变化。
+  </template>
+</Demo>
+
+## 添加数据
+
+通过 `editConfig` 属性配置 `isAddBtn` 为 `true` 来显示添加按钮。
+
+<Demo :source-code="tableAddRowCode">
+  <template #source>
+    <table-add-row />
+  </template>
+  <template #description>
+    设置 `editConfig` 的 `isAddBtn` 为 `true` 开启添加按钮，可通过 `addBtnText` 自定义按钮文本。点击添加按钮会触发 `add` 事件，并自动在表格中插入一行新数据（使用列配置中的 `defaultValue`）。
+  </template>
+</Demo>
+
+## API
+
+<ApiTable :data="tableApi" componentName="table" />
+
+<script setup>
+import TableBasic from '../examples/table/basic.vue'
+import TableTag from '../examples/table/tag.vue'
+import TableIcon from '../examples/table/icon.vue'
+import TableLink from '../examples/table/link.vue'
+import TableCustomLayout from '../examples/table/custom-layout.vue'
+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'
+import TableSingleSelection from '../examples/table/single-selection.vue'
+import TableFieldSelection from '../examples/table/field-selection.vue'
+import TablePagination from '../examples/table/pagination.vue'
+import TableActions from '../examples/table/actions.vue'
+import TableEditable from '../examples/table/editable.vue'
+import TableAddRow from '../examples/table/add-row.vue'
+import tableApi from './meta/table'
+
+import tableBasicCode from '../examples/table/basic.vue?raw'
+import tableTagCode from '../examples/table/tag.vue?raw'
+import tableIconCode from '../examples/table/icon.vue?raw'
+import tableLinkCode from '../examples/table/link.vue?raw'
+import tableCustomLayoutCode from '../examples/table/custom-layout.vue?raw'
+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'
+import tableSingleSelectionCode from '../examples/table/single-selection.vue?raw'
+import tableFieldSelectionCode from '../examples/table/field-selection.vue?raw'
+import tablePaginationCode from '../examples/table/pagination.vue?raw'
+import tableActionsCode from '../examples/table/actions.vue?raw'
+import tableEditableCode from '../examples/table/editable.vue?raw'
+import tableAddRowCode from '../examples/table/add-row.vue?raw'
+</script>