@yidun/antd-super-table 0.1.12 → 0.1.14

package/dist/interface.d.ts

@@ -177,6 +177,12 @@ export interface SuperTableColumn {
   /** 表格内容 */
   content?: string | ((row: SuperTableDataItem, index: number) => any)
 
+  /** 表格内容字段路径（优先于 content） */
+  dataIndex?: string
+
+  /** 自定义渲染函数（与 dataIndex 组合时优先于 content） */
+  customRender?: (value: any, row: SuperTableDataItem, index: number) => any
+
   /** 表格内容对应的提示信息 */
   tooltip?: string | boolean | ((row: SuperTableDataItem, index: number) => string)
 
@@ -213,6 +219,18 @@ export interface SuperTableColumn {
   /** 列索引 */
   index?: number
 
+  /** visible=false 时是否在展开区域展示，默认展示 */
+  showInExpand?: boolean
+
+  /** 透传给 a-descriptions-item 的属性 */
+  expandItemProps?: Record<string, any>
+
+  /** 单元格多元素排布方向（用于折叠列表） */
+  flexDirection?: 'row' | 'column'
+
+  /** 单元格多元素排布方向（兼容字段，不推荐） */
+  layout?: 'horizontal' | 'vertical'
+
   [key: string]: any
 }
 
@@ -452,6 +470,19 @@ export interface SuperTableTableOperations {
   onRefresh(): void
 }
 
+/**
+ * 查询区操作栏扩展插槽作用域参数（与内置查询/重置/高级筛选/展开同一区域）
+ * @public
+ */
+export interface SuperTableSearchActionsExtraSlotProps {
+  /** 与表格当前请求 loading 同步 */
+  loading: boolean
+  /** 触发查询，行为等价于点击「查询」 */
+  search: () => void
+  /** 重置查询条件，行为等价于点击「重置」 */
+  reset: () => void
+}
+
 /**
  * 插槽类型
  * @public
@@ -467,6 +498,8 @@ export interface SuperTableSlots {
   tableHead?: () => any
   /** 工具栏额外按钮插槽 */
   toolBarExtra?: () => any
+  /** 查询条件行末尾操作区扩展（仅传入该插槽时也会占位操作列） */
+  searchActionsExtra?: (props: SuperTableSearchActionsExtraSlotProps) => any
   /** 展开列标题插槽 */
   expandColumnTitle?: () => any
   /** 表格底部插槽 */

package/dist/utils/index.d.ts

@@ -54,6 +54,7 @@ export declare const initTableColumns: (columns: SuperTableColumn[]) => {
     title: string;
     titleTooltip?: string | ((row: import("..").SuperTableDataItem, index: number) => string);
     content?: string | ((row: import("..").SuperTableDataItem, index: number) => any);
+    customRender?: (value: any, row: import("..").SuperTableDataItem, index: number) => any;
     tooltip?: string | boolean | ((row: import("..").SuperTableDataItem, index: number) => string);
     props?: Record<string, any> | ((row: import("..").SuperTableDataItem, index: number) => Record<string, any>);
     slotName?: string;
@@ -61,6 +62,10 @@ export declare const initTableColumns: (columns: SuperTableColumn[]) => {
     fixed?: import("..").SuperTableColumnFixedType;
     sorter?: boolean | ((a: import("..").SuperTableDataItem, b: import("..").SuperTableDataItem) => number);
     defaultSortOrder?: import("..").SuperTableSortOrders;
+    showInExpand?: boolean;
+    expandItemProps?: Record<string, any>;
+    flexDirection?: "row" | "column";
+    layout?: "horizontal" | "vertical";
 }[];
 /**
  * 格式化场景配置项数据

package/example/formItems.ts

@@ -135,6 +135,7 @@ export const createFormItems = () => {
       type: 'component',
       label: '自定义组件',
       name: 'component',
+      showLabel: false,
       component: Switch,
       modelPropName: 'checked', // 默认通过v-model:value绑定数据，可通过modelPropName自定义修改，最终效果为v-model:[modelPropName]
     },

package/example/index.vue

@@ -47,9 +47,12 @@ const setting = useLocalStorage('super-table-example-config', {
   enableScene: true,
   enableAdvancedFilter: false,
   autoSearch: true,
+  searchOnFormItemChange: true,
+  showHiddenColumnsInExpand: false,
   enableTableConfig: false,
   sortable: false,
   showRefreshButton: false,
+  showResetButton: false,
   showExpandButton: false,
   showSceneAddonBefore: false,
   showSceneAddonAfter: false,
@@ -271,138 +274,199 @@ onMounted(() => {
 
 <template>
   <div :class="$style.container">
-    <a-form
-      layout="inline"
-      :class="$style.form"
-    >
-      <a-form-item label="场景">
-        <a-switch
-          v-model:checked="setting.enableScene"
-          checked-children="开启"
-          un-checked-children="关闭"
-        />
-      </a-form-item>
-      <a-form-item label="高级筛选">
-        <a-switch
-          v-model:checked="setting.enableAdvancedFilter"
-          :disabled="setting.enableScene"
-          checked-children="开启"
-          un-checked-children="关闭"
-        />
-      </a-form-item>
-      <a-form-item label="自动查询">
-        <a-switch
-          v-model:checked="setting.autoSearch"
-          :disabled="setting.enableScene"
-          checked-children="开启"
-          un-checked-children="关闭"
-        />
-      </a-form-item>
-      <a-form-item label="排序">
-        <a-switch
-          v-model:checked="setting.sortable"
-          checked-children="开启"
-          un-checked-children="关闭"
-        />
-      </a-form-item>
-      <a-form-item label="刷新按钮">
-        <a-switch
-          v-model:checked="setting.showRefreshButton"
-          :disabled="!setting.enableScene"
-          checked-children="展示"
-          un-checked-children="隐藏"
-        />
-      </a-form-item>
-      <a-form-item label="展开/收起按钮">
-        <a-switch
-          v-model:checked="setting.showExpandButton"
-          checked-children="展示"
-          un-checked-children="隐藏"
-        />
-      </a-form-item>
-      <a-form-item label="配置按钮">
-        <a-switch
-          v-model:checked="setting.enableTableConfig"
-          checked-children="开启"
-          un-checked-children="关闭"
-        />
-      </a-form-item>
-      <a-form-item label="sceneAddonBefore">
-        <a-switch
-          v-model:checked="setting.showSceneAddonBefore"
-          checked-children="展示"
-          un-checked-children="隐藏"
-        />
-      </a-form-item>
-      <a-form-item label="sceneAddonAfter">
-        <a-switch
-          v-model:checked="setting.showSceneAddonAfter"
-          checked-children="展示"
-          un-checked-children="隐藏"
-        />
-      </a-form-item>
-      <a-form-item label="extra">
-        <a-switch
-          v-model:checked="setting.showExtra"
-          checked-children="展示"
-          un-checked-children="隐藏"
-        />
-      </a-form-item>
-      <a-form-item label="tableHead">
-        <a-switch
-          v-model:checked="setting.showTableHead"
-          checked-children="展示"
-          un-checked-children="隐藏"
-        />
-      </a-form-item>
-      <a-form-item label="toolBar">
-        <a-switch
-          v-model:checked="setting.showToolBar"
-          checked-children="展示"
-          un-checked-children="隐藏"
-        />
-      </a-form-item>
-      <a-form-item label="tableFoot">
-        <a-switch
-          v-model:checked="setting.showTableFoot"
-          checked-children="展示"
-          un-checked-children="隐藏"
-        />
-      </a-form-item>
-      <a-form-item label="formItemColSpan">
-        <a-radio-group v-model:value="setting.formItemColSpan">
-          <a-radio :value="4">4</a-radio>
-          <a-radio :value="6">6</a-radio>
-          <a-radio :value="8">8</a-radio>
-          <a-radio :value="12">12</a-radio>
-        </a-radio-group>
-      </a-form-item>
-      <a-form-item>
-        <a-space>
-          <a-button @click="handleAddFormItem">
-            ➕ 新增查询项
-          </a-button>
-          <a-button @click="handleRemoveFormItem">
-            ➖ 删除查询项
-          </a-button>
-          <a-button @click="handleResetFormItems">
-            🔄 重置查询项
-          </a-button>
-        </a-space>
-      </a-form-item>
-      <a-form-item>
-        <a-button
-          type="primary"
-          danger
-          @click="handleClearCache"
-        >
-          清空缓存
-        </a-button>
-      </a-form-item>
-      <a-form-item label="查询项总数">
-        <a-tag color="blue">{{ formItems.length }} 项</a-tag>
-      </a-form-item>
-    </a-form>
+    <div :class="$style.demoToolbar">
+      <div :class="$style.toolbarSection">
+        <div :class="$style.toolbarSectionRow">
+          <span :class="$style.toolbarSectionTitle">全局 / SuperTable</span>
+          <a-form
+            layout="inline"
+            :class="$style.toolbarForm"
+          >
+            <a-form-item label="场景">
+            <a-switch
+              v-model:checked="setting.enableScene"
+              checked-children="开启"
+              un-checked-children="关闭"
+            />
+          </a-form-item>
+          <a-form-item label="隐藏列展开展示">
+            <a-switch
+              v-model:checked="setting.showHiddenColumnsInExpand"
+              checked-children="开启"
+              un-checked-children="关闭"
+            />
+          </a-form-item>
+          <a-form-item label="排序">
+            <a-switch
+              v-model:checked="setting.sortable"
+              checked-children="开启"
+              un-checked-children="关闭"
+            />
+          </a-form-item>
+          <a-form-item label="刷新按钮">
+            <a-switch
+              v-model:checked="setting.showRefreshButton"
+              :disabled="!setting.enableScene"
+              checked-children="展示"
+              un-checked-children="隐藏"
+            />
+          </a-form-item>
+          <a-form-item label="配置按钮">
+            <a-switch
+              v-model:checked="setting.enableTableConfig"
+              checked-children="开启"
+              un-checked-children="关闭"
+            />
+          </a-form-item>
+          </a-form>
+        </div>
+      </div>
+
+      <div :class="$style.toolbarSection">
+        <div :class="$style.toolbarSectionRow">
+          <span :class="$style.toolbarSectionTitle">场景与插槽演示</span>
+          <a-form
+            layout="inline"
+            :class="$style.toolbarForm"
+          >
+            <a-form-item label="sceneAddonBefore">
+            <a-switch
+              v-model:checked="setting.showSceneAddonBefore"
+              checked-children="展示"
+              un-checked-children="隐藏"
+            />
+          </a-form-item>
+          <a-form-item label="sceneAddonAfter">
+            <a-switch
+              v-model:checked="setting.showSceneAddonAfter"
+              checked-children="展示"
+              un-checked-children="隐藏"
+            />
+          </a-form-item>
+          <a-form-item label="extra">
+            <a-switch
+              v-model:checked="setting.showExtra"
+              checked-children="展示"
+              un-checked-children="隐藏"
+            />
+          </a-form-item>
+          <a-form-item label="tableHead">
+            <a-switch
+              v-model:checked="setting.showTableHead"
+              checked-children="展示"
+              un-checked-children="隐藏"
+            />
+          </a-form-item>
+          <a-form-item label="toolBar">
+            <a-switch
+              v-model:checked="setting.showToolBar"
+              checked-children="展示"
+              un-checked-children="隐藏"
+            />
+          </a-form-item>
+          <a-form-item label="tableFoot">
+            <a-switch
+              v-model:checked="setting.showTableFoot"
+              checked-children="展示"
+              un-checked-children="隐藏"
+            />
+          </a-form-item>
+          </a-form>
+        </div>
+      </div>
+
+      <div :class="$style.toolbarSection">
+        <div :class="$style.toolbarSectionRow">
+          <span :class="$style.toolbarSectionTitle">查询与请求</span>
+          <a-form
+            layout="inline"
+            :class="$style.toolbarForm"
+          >
+            <a-form-item label="高级筛选">
+            <a-switch
+              v-model:checked="setting.enableAdvancedFilter"
+              :disabled="setting.enableScene"
+              checked-children="开启"
+              un-checked-children="关闭"
+            />
+          </a-form-item>
+          <a-form-item label="自动查询">
+            <a-switch
+              v-model:checked="setting.autoSearch"
+              :disabled="setting.enableScene"
+              checked-children="开启"
+              un-checked-children="关闭"
+            />
+          </a-form-item>
+          <a-form-item label="表单变更自动查">
+            <a-switch
+              v-model:checked="setting.searchOnFormItemChange"
+              checked-children="开启"
+              un-checked-children="关闭"
+            />
+          </a-form-item>
+          <a-form-item label="重置按钮">
+            <a-switch
+              v-model:checked="setting.showResetButton"
+              checked-children="展示"
+              un-checked-children="隐藏"
+            />
+          </a-form-item>
+          <a-form-item label="展开/收起按钮">
+            <a-switch
+              v-model:checked="setting.showExpandButton"
+              checked-children="展示"
+              un-checked-children="隐藏"
+            />
+          </a-form-item>
+          <a-form-item label="formItemColSpan">
+            <a-radio-group v-model:value="setting.formItemColSpan">
+              <a-radio :value="4">4</a-radio>
+              <a-radio :value="6">6</a-radio>
+              <a-radio :value="8">8</a-radio>
+              <a-radio :value="12">12</a-radio>
+            </a-radio-group>
+          </a-form-item>
+          </a-form>
+        </div>
+      </div>
+
+      <div :class="$style.toolbarSection">
+        <div :class="$style.toolbarSectionRow">
+          <span :class="$style.toolbarSectionTitle">调试与数据</span>
+          <a-form
+            layout="inline"
+            :class="$style.toolbarForm"
+          >
+            <a-form-item>
+            <a-space>
+              <a-button @click="handleAddFormItem">
+                ➕ 新增查询项
+              </a-button>
+              <a-button @click="handleRemoveFormItem">
+                ➖ 删除查询项
+              </a-button>
+              <a-button @click="handleResetFormItems">
+                🔄 重置查询项
+              </a-button>
+            </a-space>
+          </a-form-item>
+          <a-form-item>
+            <a-button
+              type="primary"
+              danger
+              @click="handleClearCache"
+            >
+              清空缓存
+            </a-button>
+          </a-form-item>
+          <a-form-item label="查询项总数">
+            <a-tag color="blue">{{ formItems.length }} 项</a-tag>
+          </a-form-item>
+          </a-form>
+        </div>
+      </div>
+    </div>
     <super-table
       ref="tableRef"
       scene-type="super-table-example"
@@ -414,7 +478,11 @@ onMounted(() => {
       :enable-scene="setting.enableScene"
       :enable-advanced-filter="setting.enableAdvancedFilter"
       :auto-search="setting.autoSearch"
+      :search-on-form-item-change="setting.searchOnFormItemChange"
+      :show-hidden-columns-in-expand="setting.showHiddenColumnsInExpand"
+      :expand-descriptions-props="{ bordered: true, column: 2, labelStyle: { width: '150px' } }"
       :show-refresh-button="setting.showRefreshButton"
+      :show-reset-button="setting.showResetButton"
       :show-expand-button="setting.showExpandButton"
       :form-item-col-span="setting.formItemColSpan"
       :default-scene="defaultScene"
@@ -504,8 +572,39 @@ onMounted(() => {
   line-height: 32px;
 }
 
-.form {
-  padding: 16px;
+.demoToolbar {
+  margin-bottom: 16px;
+  padding: 0 16px;
+  background: #fff;
+}
+
+.toolbarSection {
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.toolbarSectionRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 16px;
+  row-gap: 8px;
+}
+
+.toolbarSectionTitle {
+  flex-shrink: 0;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 32px;
+  white-space: nowrap;
+}
+
+.toolbarForm {
+  flex: 1;
+  min-width: 0;
+  margin-bottom: 0;
 }
 
 .customCellList {

package/example/tableColumns.ts

@@ -43,6 +43,15 @@ export const createTableColumns = (options: {
       content: 'textList',
       width: 150,
     },
+    {
+      key: 'textListVertical',
+      title: '文本列表(竖向)',
+      type: 'text',
+      content: () => [Mock.mock('@cword(4,8)'), Mock.mock('@cword(4,8)'), Mock.mock('@cword(4,8)'), Mock.mock('@cword(4,8)')],
+      width: 180,
+      maxCount: 2,
+      flexDirection: 'column',
+    },
     {
       key: 'image',
       type: 'image',
@@ -56,6 +65,9 @@ export const createTableColumns = (options: {
       content: 'imageList',
       width: 200,
       visible: false,
+      expandItemProps: {
+        span: 2,
+      },
     },
     {
       key: 'tag',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yidun/antd-super-table",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -8,7 +8,8 @@
     "dist",
     "example",
     "example.png",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "dev": "vite",