@a2simcode/ui 0.0.88 → 0.0.90

package/docs/components/meta/table-panel.ts

@@ -12,6 +12,12 @@ export default {
       "type": "boolean",
       "default": "false"
     },
+    {
+      "name": "parentKey",
+      "description": "父级字段名（isTree 为 true 时用于将扁平数据转换成树形数据）",
+      "type": "string",
+      "default": "''"
+    },
     {
       "name": "isShowNumber",
       "description": "是否显示序号",

package/docs/components/table-panel.md

@@ -15,6 +15,19 @@
   </template>
 </Demo>
 
+## 树形数据
+
+当 `isTree` 为 `true` 时，可配合 `parentKey` 将扁平数据自动转换为树形结构展示。
+
+<Demo :source-code="tablePanelTreeParentKeyCode">
+  <template #source>
+    <table-panel-tree-parent-key />
+  </template>
+  <template #description>
+    设置 `is-tree` 和 `parent-key`，在 `loadData` 返回的扁平数据中通过 `parent-key` 指定的字段建立父子关系。
+  </template>
+</Demo>
+
 ## 筛选功能
 
 支持多条件筛选，可以针对不同字段类型选择不同的筛选方式。
@@ -201,6 +214,7 @@ interface LoadDataParams {
 
 <script setup>
 import TablePanelBasic from '../examples/table-panel/basic.vue'
+import TablePanelTreeParentKey from '../examples/table-panel/tree-parent-key.vue'
 import TablePanelFilter from '../examples/table-panel/filter.vue'
 import TablePanelPagination from '../examples/table-panel/pagination.vue'
 import TablePanelMultipleSelection from '../examples/table-panel/multiple-selection.vue'
@@ -211,6 +225,7 @@ import TablePanelButtonVisibility from '../examples/table-panel/button-visibilit
 import tablePanelApi from './meta/table-panel'
 
 import tablePanelBasicCode from '../examples/table-panel/basic.vue?raw'
+import tablePanelTreeParentKeyCode from '../examples/table-panel/tree-parent-key.vue?raw'
 import tablePanelFilterCode from '../examples/table-panel/filter.vue?raw'
 import tablePanelPaginationCode from '../examples/table-panel/pagination.vue?raw'
 import tablePanelMultipleSelectionCode from '../examples/table-panel/multiple-selection.vue?raw'

package/docs/components/table.md

@@ -57,6 +57,19 @@
   </template>
 </Demo>
 
+## Checkbox 交互布局
+
+通过列类型 `checkbox` 可以渲染一个内置的交互布局：两行内容（like/collect + normal/special），点击会实时更新当前行的数据并刷新显示。
+
+<Demo :source-code="tableCheckboxLayoutCode">
+  <template #source>
+    <table-checkbox-layout />
+  </template>
+  <template #description>
+    在 `columns` 中设置 `type: 'checkbox'`，并在对应字段里存储 `{ like, collect, type }`。
+  </template>
+</Demo>
+
 ## 自定义布局
 
 通过列配置中的 `customLayout` 属性，可以使用 VTable 的 CustomLayout 功能自定义单元格渲染。
@@ -280,6 +293,7 @@ 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 TableCheckboxLayout from '../examples/table/checkbox-layout.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'
@@ -301,6 +315,7 @@ 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 tableCheckboxLayoutCode from '../examples/table/checkbox-layout.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'

package/docs/examples/table/checkbox-layout.vue

@@ -0,0 +1,68 @@
+<template>
+  <div style="position: relative; width: 100%; height: 400px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '用户',
+      width: 120,
+      align: 'left',
+    },
+  },
+  {
+    id: 'settings',
+    type: 'checkbox',
+    config: {
+      label: '设置',
+      width: 240,
+      align: 'center',
+    },
+  },
+  {
+    id: 'settingsText',
+    config: {
+      label: '当前值',
+      width: 'auto',
+      align: 'left',
+      fieldFormat: (row: any) => {
+        return JSON.stringify(row.settings)
+      },
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: '1',
+    name: '张三',
+    settings: [
+      { label: 'like', value: 'like', checked: true },
+      { label: 'collect', value: 'collect', checked: false },
+    ],
+  },
+  {
+    id: '2',
+    name: '李四',
+    settings: [
+      { label: 'like', value: 'like', checked: false },
+      { label: 'collect', value: 'collect', checked: true },
+      { label: 'notify', value: 'notify', checked: true },
+    ],
+  },
+  {
+    id: '3',
+    name: '王五',
+    settings: [
+      { label: 'like', value: 'like', checked: false },
+      { label: 'collect', value: 'collect', checked: false },
+    ],
+  },
+])
+</script>

package/docs/examples/table-panel/tree-parent-key.vue

@@ -0,0 +1,66 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      row-key="id"
+      :columns="columns"
+      :load-data="loadData"
+      :is-tree="true"
+      parent-key="pid"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '名称',
+      width: 240,
+    },
+  },
+  {
+    id: 'id',
+    type: '',
+    config: {
+      label: 'ID',
+      width: 160,
+    },
+  },
+  {
+    id: 'pid',
+    type: '',
+    config: {
+      label: '父ID',
+      width: 160,
+    },
+  },
+  {
+    id: 'value',
+    type: '',
+    config: {
+      label: '值',
+      width: 120,
+      align: 'right',
+    },
+  },
+])
+
+const flatData = [
+  { id: '1', pid: '', name: '父节点 1', value: 10 },
+  { id: '1-1', pid: '1', name: '子节点 1-1', value: 11 },
+  { id: '1-2', pid: '1', name: '子节点 1-2', value: 12 },
+  { id: '1-2-1', pid: '1-2', name: '子节点 1-2-1', value: 121 },
+  { id: '2', pid: '', name: '父节点 2', value: 20 },
+  { id: '2-1', pid: '2', name: '子节点 2-1', value: 21 },
+]
+
+const loadData = async (_params: Record<string, any>) => {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(flatData), 200)
+  })
+}
+</script>

package/package.json

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