@a2simcode/ui 0.0.240 → 0.0.242

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.240",
+  "version": "0.0.242",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",