@a2simcode/ui 0.0.241 → 0.0.243

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

@@ -12,6 +12,12 @@ export default {
       "type": "SchemaConfig[]",
       "default": "() => []"
     },
+    {
+      "name": "columnFilter",
+      "description": "列过滤（用于隐藏列）",
+      "type": "string[]",
+      "default": "() => []"
+    },
     {
       "name": "searchList",
       "description": "固定过滤条件",
@@ -145,7 +151,7 @@ export default {
     {
       "name": "actionFilter",
       "description": "行内操作按钮过滤方法",
-      "type": "(params: {\n  action: ButtonCompType\n  record: Record<string, any>\n  recordIndex: number\n  col: number\n  row: number\n  table: any\n}) =>\n  | boolean\n  | {\n      display?: boolean\n      disabled?: boolean\n    }\n  | null\n  | undefined",
+      "type": "(params: {\r\n  action: ButtonCompType\r\n  record: Record<string, any>\r\n  recordIndex: number\r\n  col: number\r\n  row: number\r\n  table: any\r\n}) =>\r\n  | boolean\r\n  | {\r\n      display?: boolean\r\n      disabled?: boolean\r\n    }\r\n  | null\r\n  | undefined",
       "default": "null"
     },
     {

package/docs/components/meta/table.ts

@@ -18,6 +18,12 @@ export default {
       "type": "ColumnSchemaConfig[]",
       "default": "() => []"
     },
+    {
+      "name": "columnFilter",
+      "description": "列过滤（用于隐藏列）",
+      "type": "string[]",
+      "default": "() => []"
+    },
     {
       "name": "records",
       "description": "表格数据",
@@ -122,7 +128,7 @@ export default {
     {
       "name": "actionFilter",
       "description": "行内操作按钮过滤方法",
-      "type": "(params: {\n  action: ButtonCompType\n  record: Record<string, any>\n  recordIndex: number\n  col: number\n  row: number\n  table: any\n}) =>\n  | boolean\n  | {\n      display?: boolean\n      disabled?: boolean\n    }\n  | null\n  | undefined",
+      "type": "(params: {\r\n  action: ButtonCompType\r\n  record: Record<string, any>\r\n  recordIndex: number\r\n  col: number\r\n  row: number\r\n  table: any\r\n}) =>\r\n  | boolean\r\n  | {\r\n      display?: boolean\r\n      disabled?: boolean\r\n    }\r\n  | null\r\n  | undefined",
       "default": "null"
     },
     {
@@ -207,7 +213,7 @@ export default {
     {
       "name": "selectionChanged",
       "description": "选中数据变化时触发",
-      "type": "{\n  isMultiple: boolean\n  selections: Record<string, any>[]\n  record: Record<string, any>\n  checked: boolean\n}"
+      "type": "{\r\n  isMultiple: boolean\r\n  selections: Record<string, any>[]\r\n  record: Record<string, any>\r\n  checked: boolean\r\n}"
     },
     {
       "name": "selectRecordsChanged",
@@ -242,7 +248,7 @@ export default {
     {
       "name": "change",
       "description": "变更事件",
-      "type": "{\n  id: string\n  value: any\n  data: any\n  formData: Record<string, any>\n  tableData: Record<string, any>[]\n  type: 'add' | 'delete' | 'update' | 'sort'\n}"
+      "type": "{\r\n  id: string\r\n  value: any\r\n  data: any\r\n  formData: Record<string, any>\r\n  tableData: Record<string, any>[]\r\n  type: 'add' | 'delete' | 'update' | 'sort'\r\n}"
     }
   ],
   "slots": [],
@@ -389,7 +395,7 @@ export default {
         },
         {
           "name": "config",
-          "type": "TableColumnCompConfig & {\n    /**\n     * @zh 列的标题\n     */\n    label: string\n  }",
+          "type": "TableColumnCompConfig & {\r\n    /**\r\n     * @zh 列的标题\r\n     */\r\n    label: string\r\n  }",
           "description": "列配置"
         },
         {

package/docs/components/table-panel.md

@@ -15,6 +15,19 @@
   </template>
 </Demo>
 
+## 隐藏列
+
+通过 `columnFilter` 传入需要隐藏的列 id 数组。
+
+<Demo :source-code="tablePanelColumnFilterCode">
+  <template #source>
+    <table-panel-column-filter />
+  </template>
+  <template #description>
+    示例通过按钮动态修改 `columnFilter`，表格面板会自动刷新列。
+  </template>
+</Demo>
+
 ## 树形数据
 
 当 `isTree` 为 `true` 时，可配合 `parentKey` 将扁平数据自动转换为树形结构展示。
@@ -254,6 +267,7 @@ interface LoadDataParams {
 
 <script setup>
 import TablePanelBasic from '../examples/table-panel/basic.vue'
+import TablePanelColumnFilter from '../examples/table-panel/column-filter.vue'
 import TablePanelTreeParentKey from '../examples/table-panel/tree-parent-key.vue'
 import TablePanelFilter from '../examples/table-panel/filter.vue'
 import TablePanelSearchList from '../examples/table-panel/search-list.vue'
@@ -268,6 +282,7 @@ import TablePanelMask from '../examples/table-panel/mask.vue'
 import tablePanelApi from './meta/table-panel'
 
 import tablePanelBasicCode from '../examples/table-panel/basic.vue?raw'
+import tablePanelColumnFilterCode from '../examples/table-panel/column-filter.vue?raw'
 import tablePanelTreeParentKeyCode from '../examples/table-panel/tree-parent-key.vue?raw'
 import tablePanelFilterCode from '../examples/table-panel/filter.vue?raw'
 import tablePanelSearchListCode from '../examples/table-panel/search-list.vue?raw'

package/docs/components/table.md

@@ -15,6 +15,19 @@
   </template>
 </Demo>
 
+## 隐藏列
+
+通过 `columnFilter` 传入需要隐藏的列 id 数组。
+
+<Demo :source-code="tableColumnFilterCode">
+  <template #source>
+    <table-column-filter />
+  </template>
+  <template #description>
+    示例通过按钮动态修改 `columnFilter`，表格会自动刷新列。
+  </template>
+</Demo>
+
 ## 动态类型渲染
 
 <Demo :source-code="tableDynamicTypeCode">
@@ -377,6 +390,7 @@
 
 <script setup>
 import TableBasic from '../examples/table/basic.vue'
+import TableColumnFilter from '../examples/table/column-filter.vue'
 import TableTag from '../examples/table/tag.vue'
 import TableIcon from '../examples/table/icon.vue'
 import TableLink from '../examples/table/link.vue'
@@ -406,6 +420,7 @@ import TableRowDrag from '../examples/table/row-drag.vue'
 import tableApi from './meta/table'
 
 import tableBasicCode from '../examples/table/basic.vue?raw'
+import tableColumnFilterCode from '../examples/table/column-filter.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'

package/docs/examples/table/column-filter.vue

@@ -0,0 +1,96 @@
+<template>
+  <div style="position: relative; width: 100%; height: 560px">
+    <div style="display: flex; align-items: center; gap: 8px; padding: 0 0 10px">
+      <div>当前隐藏列: {{ hiddenColumnsLabel }}</div>
+      <j-button type="text" label="隐藏状态列" @click="hide('status')" />
+      <j-button type="text" label="显示状态列" @click="show('status')" />
+      <j-button type="text" label="隐藏更新时间列" @click="hide('updateTime')" />
+      <j-button type="text" label="显示更新时间列" @click="show('updateTime')" />
+      <j-button type="text" label="重置" @click="reset()" />
+    </div>
+    <j-table :columns="columns" :records="records" :column-filter="hiddenColumns" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '名称',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'status',
+    config: {
+      label: '状态',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'updateTime',
+    config: {
+      label: '最近更新时间',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'owner',
+    config: {
+      label: '负责人',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+])
+
+const records = ref([
+  {
+    name: '项目A',
+    status: '进行中',
+    updateTime: '2025-12-25 20:55:52',
+    owner: '张三',
+  },
+  {
+    name: '项目B',
+    status: '已完成',
+    updateTime: '2025-12-25 20:51:17',
+    owner: '李四',
+  },
+  {
+    name: '项目C',
+    status: '待审核',
+    updateTime: '2025-12-25 20:51:11',
+    owner: '王五',
+  },
+])
+
+const hiddenColumns = ref<string[]>(['status'])
+
+const hide = (id: string) => {
+  if (!hiddenColumns.value.includes(id)) {
+    hiddenColumns.value.push(id)
+  }
+}
+
+const show = (id: string) => {
+  const index = hiddenColumns.value.indexOf(id)
+  if (index >= 0) {
+    hiddenColumns.value.splice(index, 1)
+  }
+}
+
+const reset = () => {
+  hiddenColumns.value.splice(0, hiddenColumns.value.length)
+}
+
+const hiddenColumnsLabel = computed(() => {
+  return hiddenColumns.value.length > 0 ? hiddenColumns.value.join('、') : '无'
+})
+</script>

package/docs/examples/table-panel/column-filter.vue

@@ -0,0 +1,116 @@
+<template>
+  <div style="position: relative; width: 100%; height: 560px">
+    <div style="display: flex; align-items: center; gap: 8px; padding: 0 0 10px">
+      <div>当前隐藏列: {{ hiddenColumnsLabel }}</div>
+      <j-button type="text" label="隐藏状态列" @click="hide('status')" />
+      <j-button type="text" label="显示状态列" @click="show('status')" />
+      <j-button type="text" label="隐藏更新时间列" @click="hide('updateTime')" />
+      <j-button type="text" label="显示更新时间列" @click="show('updateTime')" />
+      <j-button type="text" label="重置" @click="reset()" />
+    </div>
+    <j-table-panel
+      row-key="id"
+      :columns="columns"
+      :load-data="loadData"
+      :column-filter="hiddenColumns"
+      :show-filter-button="false"
+      :show-order-button="false"
+      :show-column-button="false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '名称',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'status',
+    type: '',
+    config: {
+      label: '状态',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'updateTime',
+    type: '',
+    config: {
+      label: '最近更新时间',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'owner',
+    type: '',
+    config: {
+      label: '负责人',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: 'A',
+    name: '项目A',
+    status: '进行中',
+    updateTime: '2025-12-25 20:55:52',
+    owner: '张三',
+  },
+  {
+    id: 'B',
+    name: '项目B',
+    status: '已完成',
+    updateTime: '2025-12-25 20:51:17',
+    owner: '李四',
+  },
+  {
+    id: 'C',
+    name: '项目C',
+    status: '待审核',
+    updateTime: '2025-12-25 20:51:11',
+    owner: '王五',
+  },
+])
+
+const loadData = async () => {
+  return records.value
+}
+
+const hiddenColumns = ref<string[]>(['status'])
+
+const hide = (id: string) => {
+  if (!hiddenColumns.value.includes(id)) {
+    hiddenColumns.value.push(id)
+  }
+}
+
+const show = (id: string) => {
+  const index = hiddenColumns.value.indexOf(id)
+  if (index >= 0) {
+    hiddenColumns.value.splice(index, 1)
+  }
+}
+
+const reset = () => {
+  hiddenColumns.value.splice(0, hiddenColumns.value.length)
+}
+
+const hiddenColumnsLabel = computed(() => {
+  return hiddenColumns.value.length > 0 ? hiddenColumns.value.join('、') : '无'
+})
+</script>
+

package/package.json

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