@a2simcode/ui 0.0.226 → 0.0.228

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

@@ -1,5 +1,11 @@
 export default {
   "props": [
+    {
+      "name": "modelValue",
+      "description": "输入值【作为表单的编辑表格使用】",
+      "type": "Record<string, any>[]",
+      "default": "() => []"
+    },
     {
       "name": "columns",
       "description": "表格列配置",

package/docs/components/table-panel.md

@@ -179,6 +179,19 @@
   </template>
 </Demo>
 
+## v-model 外部数据驱动
+
+通过 `v-model` 绑定外部数据，当绑定的数据发生变化时，表格会自动刷新。适用于将表格作为表单编辑组件使用、或需要外部控制表格数据的场景。
+
+<Demo :source-code="tablePanelModelValueCode">
+  <template #source>
+    <table-panel-model-value />
+  </template>
+  <template #description>
+    使用 `v-model` 绑定数据源，外部修改绑定值后表格自动重新加载。示例中通过按钮操作（刷新、新增、清空）演示 `modelValue` 变化驱动表格更新的效果。
+  </template>
+</Demo>
+
 ## 自定义渲染（掩码示例）
 
 通过 `render-v-node` 可以跳过内置表格渲染，使用 VNode 自定义每条记录的展示方式。下面示例用卡片布局展示行数据，并支持一键切换手机号/邮箱的掩码显示。
@@ -250,6 +263,7 @@ import TablePanelBatchOperations from '../examples/table-panel/batch-operations.
 import TablePanelSubTableLazy from '../examples/table-panel/sub-table-lazy.vue'
 import TablePanelGetSelection from '../examples/table-panel/get-selection.vue'
 import TablePanelButtonVisibility from '../examples/table-panel/button-visibility.vue'
+import TablePanelModelValue from '../examples/table-panel/model-value.vue'
 import TablePanelMask from '../examples/table-panel/mask.vue'
 import tablePanelApi from './meta/table-panel'
 
@@ -263,5 +277,6 @@ import tablePanelBatchOperationsCode from '../examples/table-panel/batch-operati
 import tablePanelSubTableLazyCode from '../examples/table-panel/sub-table-lazy.vue?raw'
 import tablePanelGetSelectionCode from '../examples/table-panel/get-selection.vue?raw'
 import tablePanelButtonVisibilityCode from '../examples/table-panel/button-visibility.vue?raw'
+import tablePanelModelValueCode from '../examples/table-panel/model-value.vue?raw'
 import tablePanelMaskCode from '../examples/table-panel/mask.vue?raw'
 </script>

package/docs/examples/table-panel/model-value.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <div style="margin-bottom: 12px">
+      <el-button type="primary" @click="refreshData">刷新数据</el-button>
+      <el-button @click="addRecord">新增一条记录</el-button>
+      <el-button @click="clearData">清空数据</el-button>
+      <span style="margin-left: 12px; color: #999">当前数据条数: {{ tableData.length }}</span>
+    </div>
+    <div style="position: relative; width: 100%; height: 400px">
+      <j-table-panel v-model="tableData" row-key="id" :columns="columns" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'id',
+    type: '',
+    config: {
+      label: 'ID',
+      width: 80,
+    },
+  },
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '姓名',
+      width: 120,
+    },
+  },
+  {
+    id: 'department',
+    type: '',
+    config: {
+      label: '部门',
+      width: 120,
+    },
+  },
+  {
+    id: 'position',
+    type: '',
+    config: {
+      label: '职位',
+    },
+  },
+])
+
+let nextId = 6
+
+const initialData = [
+  { id: 1, name: '张三', department: '技术部', position: '前端工程师' },
+  { id: 2, name: '李四', department: '产品部', position: '产品经理' },
+  { id: 3, name: '王五', department: '设计部', position: 'UI设计师' },
+  { id: 4, name: '赵六', department: '技术部', position: '后端工程师' },
+  { id: 5, name: '孙七', department: '运营部', position: '运营专员' },
+]
+
+const tableData = ref<Record<string, any>[]>([...initialData])
+
+const refreshData = () => {
+  // 重新赋值触发 modelValue 变化 -> 自动刷新表格
+  tableData.value = [...initialData]
+  nextId = 6
+}
+
+const addRecord = () => {
+  const departments = ['技术部', '产品部', '设计部', '运营部']
+  const positions = ['工程师', '经理', '专员', '实习生']
+  tableData.value = [
+    ...tableData.value,
+    {
+      id: nextId++,
+      name: `员工${nextId - 1}`,
+      department: departments[Math.floor(Math.random() * departments.length)],
+      position: positions[Math.floor(Math.random() * positions.length)],
+    },
+  ]
+}
+
+const clearData = () => {
+  tableData.value = []
+}
+</script>

package/package.json

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