@yidun/antd-super-table 0.1.9 → 0.1.11

package/dist/interface.d.ts

@@ -47,6 +47,36 @@ export type SuperTableSceneStorageType = 'local' | 'api'
  */
 export type SuperTableDataItem = Record<string, any>
 
+/**
+ * 查询项 input addonAfter 点击回调参数
+ * @public
+ */
+export interface SuperTableFormItemAddonAfterContext {
+  /** 查询项名称 */
+  name: string
+  /** 当前值 */
+  value: any
+  /** 当前查询项配置 */
+  formItem: SuperTableFormItem
+}
+
+/**
+ * 查询项 input addonAfter 配置
+ * @public
+ */
+export interface SuperTableFormItemAddonAfter {
+  /** 按钮文案 */
+  text?: string
+  /** 按钮自定义 class */
+  className?: string
+  /** 是否显示 */
+  show?: boolean
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 点击回调 */
+  onClick?: (context: SuperTableFormItemAddonAfterContext) => void
+}
+
 /**
  * 查询条件配置接口
  * @public
@@ -64,6 +94,9 @@ export interface SuperTableFormItem {
   /** 查询项标签 */
   label: string
 
+  /** 查询项提示信息，展示在标签旁的 tooltip 中 */
+  tooltip?: string | number
+
   /** 传递给查询项的props */
   props?: Record<string, any>
 
@@ -82,6 +115,15 @@ export interface SuperTableFormItem {
   /** 带select前缀的组合输入框配置 */
   addonBeforeProps?: SelectProps
 
+  /** input 的后置附加按钮配置 */
+  addonAfter?: SuperTableFormItemAddonAfter
+
+  /** addonAfter 兼容错拼字段（不推荐） */
+  addonAffter?: SuperTableFormItemAddonAfter
+
+  /** addonAfter 兼容错拼字段（不推荐） */
+  addonAter?: SuperTableFormItemAddonAfter
+
   /** 改变时保持静默，不要触发搜索 */
   quiet?: boolean
 
@@ -144,6 +186,9 @@ export interface SuperTableColumn {
   /** 表格内容解析用到的组件对应的props */
   props?: Record<string, any> | ((row: SuperTableDataItem, index: number) => Record<string, any>)
 
+  /** 自定义单元格插槽名，命中后优先使用具名插槽渲染 */
+  slotName?: string
+
   /** 是否可复制 */
   copyable?: boolean
 
@@ -428,6 +473,9 @@ export interface SuperTableSlots {
   tableFoot?: () => any
   /** 展开行内容插槽 */
   expandedRowRender?: (props: { record: any }) => any
+
+  /** 自定义单元格具名插槽 */
+  [slotName: string]: ((props?: Record<string, any>) => any) | undefined
 }
 
 /**

package/dist/utils/index.d.ts

@@ -19,10 +19,14 @@ export declare const initFormItems: (formItems: SuperTableFormItem[]) => {
     name: string;
     modelPropName?: string;
     label: string;
+    tooltip?: string | number;
     value?: any;
     component?: import("vue").Component;
     span?: number;
     addonBeforeProps?: import("ant-design-vue").SelectProps;
+    addonAfter?: import("..").SuperTableFormItemAddonAfter;
+    addonAffter?: import("..").SuperTableFormItemAddonAfter;
+    addonAter?: import("..").SuperTableFormItemAddonAfter;
     quiet?: boolean;
     showLabel?: boolean;
     fixed?: boolean;
@@ -52,6 +56,7 @@ export declare const initTableColumns: (columns: SuperTableColumn[]) => {
     content?: string | ((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;
     copyable?: boolean;
     fixed?: import("..").SuperTableColumnFixedType;
     sorter?: boolean | ((a: import("..").SuperTableDataItem, b: import("..").SuperTableDataItem) => number);

package/example/formItems.ts

@@ -8,7 +8,15 @@ export const createFormItems = () => {
       type: 'input', // 类型
       label: '输入框',
       name: 'input', // 字段名称
+      tooltip: '按关键词过滤',
       fixed: true,
+      addonAfter: {
+        text: '查询帮助',
+        className: 'super-table-addon-after-btn',
+        onClick: ({ name, value }) => {
+          console.log('[super-table] addonAfter click:', { name, value })
+        },
+      },
     },
     {
       key: 'inputGroup',
@@ -49,6 +57,7 @@ export const createFormItems = () => {
       type: 'inputNumber',
       label: '数字输入框',
       name: 'inputNumber',
+      tooltip: 1001,
       fixed: true,
     },
     {
@@ -102,7 +111,7 @@ export const createFormItems = () => {
           { label: 'Last Week', value: dayjs().add(-7, 'd') },
           { label: 'Last Month', value: dayjs().add(-1, 'month') },
         ],
-      }
+      },
     },
     {
       key: 'rangePicker',

package/example/index.vue

@@ -443,6 +443,29 @@ onMounted(() => {
       >
         <div :class="$style.block">tableFoot</div>
       </template>
+      <template #customBodyCell="{ record, index }">
+        <div :class="$style.customCellList">
+          <div :class="$style.customCellHeader">
+            <a-tag color="purple">插槽</a-tag>
+            <span :class="$style.customCellTitle">第 {{ index + 1 }} 行</span>
+          </div>
+          <div :class="$style.customCellItem">
+            <a-badge status="processing" />
+            <span :class="$style.customCellText">{{ record?.text || '-' }}</span>
+            <a-button
+              type="link"
+              size="small"
+            >
+              复制
+            </a-button>
+          </div>
+          <div :class="$style.customCellItem">
+            <a-badge status="success" />
+            <span :class="$style.customCellText">元素 B ⭐</span>
+            <a-tag color="green">生效</a-tag>
+          </div>
+        </div>
+      </template>
     </super-table>
   </div>
 </template>
@@ -464,4 +487,32 @@ onMounted(() => {
 .form {
   padding: 16px;
 }
+
+.customCellList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.customCellHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.customCellTitle {
+  color: #595959;
+  font-size: 12px;
+}
+
+.customCellItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.customCellText {
+  flex: 1;
+  color: #262626;
+}
 </style>

package/example/tableColumns.ts

@@ -135,6 +135,14 @@ export const createTableColumns = (options: {
         },
       },
     },
+    {
+      key: 'customSlotCell',
+      title: '自定义插槽',
+      type: 'text',
+      content: 'text',
+      width: 180,
+      slotName: 'customBodyCell',
+    },
     {
       key: 'status',
       title: '状态',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yidun/antd-super-table",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "type": "module",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",