Antd Super Table 组件

介绍

Antd Super Table 是一个基于 Ant Design Vue 的高级表格组件，提供了丰富的功能特性：

• 🔍 灵活的查询条件配置
• 📊 强大的表格列配置
• 🎯 场景管理功能
• ⚡️ 高性能渲染
• 🛠 可定制的表格配置
• 🔄 表格拖拽排序
• 📱 响应式设计
• 🎨 主题定制

示例

安装

npm install @yidun/antd-super-table

基础用法

<template>
  <SuperTable :form-items="formItems" :columns="columns" :request="onRequest" scene-type="user-list" />
</template>

<script setup lang="ts">
import SuperTable from '@yidun/antd-super-table'
import type { SuperTableFormItem, SuperTableColumn } from '@yidun/antd-super-table'

// 定义查询条件
const formItems: SuperTableFormItem[] = [
  {
    type: 'input',
    name: 'name',
    label: '姓名',
    fixed: true,
  },
  {
    type: 'select',
    name: 'status',
    label: '状态',
    props: {
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 },
      ],
    },
  },
]

// 定义表格列
const columns: SuperTableColumn[] = [
  {
    key: 'name',
    title: '姓名',
    content: 'name',
    width: 150,
  },
  {
    key: 'status',
    title: '状态',
    type: 'tag',
    content: record => ({
      label: record.status === 1 ? '启用' : '禁用',
      color: record.status === 1 ? 'green' : 'red',
    }),
  },
  {
    key: 'actions',
    title: '操作',
    type: 'button',
    fixed: 'right',
    content: () => [
      { label: '编辑', onClick: () => console.log('编辑') },
      { label: '删除', onClick: () => console.log('删除') },
    ],
  },
]

// 定义请求函数
const onRequest = async (options: { params: Record<string, any>; pageSize: number; pageNum: number }) => {
  // 这里调用你的实际 API 接口
  const res = await fetch('/api/user/list', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      ...options.params,
      pageNum: options.pageNum,
      pageSize: options.pageSize,
    }),
  }).then(res => res.json())

  return {
    data: res.data,
    total: res.total,
  }
}
</script>

查询场景配置

默认启用场景，场景相关的配置存储在localStorage中

| 属性名 | 类型 | 默认值 | 说明 | | ---------------- | ------------ | ------- | ----------------------------------- | | sceneType | string | '' | 场景对应的标识 | | enableScene | boolean | true | 是否启用场景管理 | | sceneStorageType | string | local | 场景存储位置，可选 local 或 api | | sceneRequest | object | - | 场景请求函数配置（API模式时必填） | | defaultScene | object/array | | 默认场景配置 | | maxSceneCount | number | 100 | 最大场景数量 |

场景存储配置

本地存储模式（默认）

<template>
  <SuperTable :form-items="formItems" :columns="columns" :request="onRequest" scene-storage-type="local" enable-scene />
</template>

API存储模式

<template>
  <SuperTable
    :form-items="formItems"
    :columns="columns"
    :request="onRequest"
    scene-storage-type="api"
    :scene-request="sceneRequest"
    enable-scene
  />
</template>

<script setup>
// 场景请求函数配置
const sceneRequest = {
  // 查询场景列表
  querySceneList: async (params: { type: string }) => {
    const response = await fetch('/api/scene/query', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(params)
    })
    return response.json()
  },

  // 创建场景
  createScene: async (params: any) => {
    const response = await fetch('/api/scene/create', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(params)
    })
    return response.json()
  },

  // 更新场景
  updateScene: async (params: any) => {
    const response = await fetch('/api/scene/update', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(params)
    })
    return response.json()
  },

  // 删除场景
  deleteScene: async (params: string[]) => {
    const response = await fetch('/api/scene/delete', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(params)
    })
    return response.json()
  }
}
</script>

错误处理

当 sceneStorageType 为 'api' 但没有提供 sceneRequest 时，组件会在控制台输出错误信息并禁用场景功能：

// 控制台错误信息
SuperTable: sceneStorageType 为 "api" 时，必须提供 sceneRequest 配置

查询条件配置

支持的输入类型

• 文本输入框 (input)
• 组合输入框 (inputGroup)
• 数字输入框 (inputNumber)
• 数字范围输入框 (inputNumberRange)
• 选择器 (select)
• 日期选择器 (datePicker)
• 日期范围选择器 (rangePicker)
• 级联选择 (cascader)
• 树形选择 (treeSelect)
• 自定义组件 (component)

查询条件属性

| 属性名 | 类型 | 默认值 | 说明 | | ------------- | ------------- | ------- | ----------------------------------------------------------------- | | type | string | - | 查询条件类型 | | name | string | - | 字段名称 | | label | string | - | 显示标签 | | value | any | - | 默认值 | | props | object | {} | 传递给组件的属性 | | component | Component | - | 自定义组件（type为component时必填） | | modelPropName | string | 'value' | 自定义组件的v-model属性名 | | span | number | 1 | 列宽系数 | | visible | boolean | true | 是否显示 | | fixed | boolean | false | 是否固定（不可删除） | | selected | boolean | false | 是否默认选中 | | quiet | boolean | false | 是否静默更新（不触发搜索） | | showLabel | boolean | true | 是否显示标签 | | tooltip | string/number | - | 查询项提示信息，展示为标签旁 icon 的 tooltip（默认 top） | | addonAfter | object | - | 仅 input 生效，后置 link/small 按钮配置（文案/样式/点击事件） |

完整示例

import dayjs from 'dayjs'
import { Switch } from 'ant-design-vue'

export const createFormItems = () => {
  return [
    {
      key: 'input', // 唯一标识
      type: 'input', // 类型
      label: '输入框',
      name: 'input', // 字段名称
      tooltip: '按关键词过滤',
      fixed: true,
      addonAfter: {
        text: '查询帮助',
        className: 'my-addon-after-btn',
        onClick: ({ name, value }) => {
          console.log('[super-table] addonAfter click:', { name, value })
        },
      },
    },
    {
      key: 'inputGroup',
      type: 'inputGroup',
      label: '输入框组',
      name: 'inputGroup',
      fixed: true,
      addonBeforeProps: {
        style: {
          width: '40%',
        },
        options: [
          {
            label: '大于',
            value: '>',
          },
          {
            label: '小于',
            value: '<',
          },
          {
            label: '大于等于',
            value: '>=',
          },
          {
            label: '小于等于',
            value: '<=',
          },
        ],
      },
      value: {
        select: '<=',
        value: 999,
      },
    },
    {
      key: 'inputNumber',
      type: 'inputNumber',
      label: '数字输入框',
      name: 'inputNumber',
      tooltip: 1001,
      fixed: true,
    },
    {
      key: 'inputNumberRange',
      type: 'inputNumberRange',
      label: '数字范围输入',
      name: 'inputNumberRange',
      fixed: true,
      props: {
        min: 0,
        max: 100,
        placeholder: ['最小值', '最大值'],
      },
    },
    {
      key: 'select',
      type: 'select',
      label: '单选',
      name: 'select',
      fixed: true,
      props: {
        options: Array.from({ length: 3 }).map((_, index) => ({
          label: `选项-${index + 1}`,
          value: index,
        })),
      },
    },
    {
      key: 'multipleSelect',
      type: 'select',
      label: '多选',
      name: 'multipleSelect',
      props: {
        mode: 'multiple',
        options: Array.from({ length: 10 }).map((_, index) => ({
          label: `选项-${index + 1}`,
          value: index,
        })),
      },
    },
    {
      key: 'date',
      type: 'datePicker',
      label: '日期',
      name: 'date',
      props: {
        showTime: true,
        format: 'YYYY-MM-DD HH:mm',
        presets: [
          { label: 'Yesterday', value: dayjs().add(-1, 'd') },
          { label: 'Last Week', value: dayjs().add(-7, 'd') },
          { label: 'Last Month', value: dayjs().add(-1, 'month') },
        ],
      },
    },
    {
      key: 'rangePicker',
      type: 'rangePicker',
      label: '时间范围',
      name: 'rangePicker',
      props: {
        showTime: true,
        format: 'YYYY-MM-DD HH:mm',
        presets: [
          { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
          { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
          { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
          { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
        ],
      },
    },
    {
      key: 'component',
      type: 'component',
      label: '自定义组件',
      name: 'component',
      component: Switch,
      modelPropName: 'checked', // 默认通过v-model:value绑定数据，可通过modelPropName自定义修改，最终效果为v-model:[modelPropName]
      showLabel: false, // 是否显示label，默认为true
    },
    {
      key: 'cascader',
      type: 'cascader',
      label: '级联选择',
      name: 'cascader',
      props: {
        options: [
          {
            value: 'zhejiang',
            label: 'Zhejiang',
            children: [
              {
                value: 'hangzhou',
                label: 'Hangzhou',
              },
            ],
          },
        ],
      },
    },
    {
      key: 'treeSelect',
      type: 'treeSelect',
      label: '树形选择',
      name: 'treeSelect',
      props: {
        treeData: [
          {
            title: 'Node1',
            value: '0-0',
            children: [
              {
                title: 'Child Node1',
                value: '0-0-0',
              },
            ],
          },
        ],
      },
    },
  ]
}

表格列配置

支持的列类型

• 文本 (text)
• 图片 (image)
• 标签 (tag)
• 按钮 (button)
• 链接 (link)
• 自定义 (component)
• 排序 (sort)

内置解析类型，均支持在一个单元格内展示多个节点，超出最大个数后会展示更多按钮，点击更多按钮可展开查看所有数据，所以可以扩展出文本列表、图片列表、按钮列表、标签列表等展示形式

表格列属性

| 属性名 | 类型 | 默认值 | 说明 | | ------------ | ----------------------- | ------ | ----------------------------------- | | key | string | - | 列的唯一标识 | | title | string | - | 列标题 | | type | string/function | 'text' | 列类型 | | content | string/function | - | 列内容 | | titleTooltip | string/function | - | 标题提示信息 | | tooltip | string/boolean/function | - | 内容提示信息 | | component | Component | - | 自定义组件（type为component时必填） | | props | object/function | {} | 传递给组件的属性 | | width | number | 120 | 列宽度 | | visible | boolean | true | 是否可见 | | fixed | string | - | 固定列位置，可选 'left' 或 'right' | | copyable | boolean | false | 是否可复制 | | ellipsis | boolean | true | 是否超出显示省略号 |

完整示例

import { Input } from 'ant-design-vue'

/**
 * @description 初始化表单配置，操作类方法可通过参数传递进来
 * @param { object } options 一些提供给表格内置组件使用的扩展
 *
 * */
export const createTableColumns = (options: { onDelete: (record: Record<string, any>) => void }) => {
  return [
    {
      key: 'text',
      title: '文本',
      type: 'text', // 默认类型为text，可不填
      content: 'text',
      width: 150,
    },
    {
      key: 'textList',
      title: '文本列表',
      content: 'textList',
      width: 150,
    },
    {
      key: 'image',
      type: 'image',
      title: '图片',
      content: 'imageSrc',
    },
    {
      key: 'tag',
      type: 'tag',
      title: '标签',
      width: 120,
      content() {
        return {
          label: '标签',
          color: 'blue',
        }
      },
    },
    {
      key: 'tagList',
      type: 'tag',
      title: '标签列表',
      width: 200,
      content() {
        return [
          {
            label: '色情',
            color: 'red',
          },
          {
            label: '违禁',
            color: 'blue',
          },
          {
            label: '暴恐',
            color: '#f00',
          },
          {
            label: '涉政',
            color: 'pink',
          },
        ]
      },
    },
    {
      key: 'button',
      type: 'button',
      title: '按钮',
      content() {
        return {
          label: '查看配置',
          onClick() {
            window.open(location.href)
          },
        }
      },
    },
    {
      key: 'link',
      type: 'link',
      title: '链接',
      content() {
        return {
          label: '查看详情',
          to: location.href,
        }
      },
    },
    {
      key: 'custom',
      title: '自定义组件',
      type: 'component',
      component: Input,
      width: 200,
      props: {
        placeholder: '请输入',
        style: {
          width: '120px',
        },
        onChange() {
          console.log('change')
        },
      },
    },
    {
      key: 'actions',
      type: 'button',
      title: '操作',
      fixed: 'right',
      width: 200,
      content() {
        return [
          {
            label: '编辑',
          },
          {
            label: '删除',
            onClick: options.onDelete,
          },

          {
            label: '详情',
            onClick() {
              window.open(location.href)
            },
          },
          {
            label: '上线',
          },
          {
            label: '下线',
          },
        ]
      },
    },
  ]
}

高级功能

表格拖拽排序

<template>
  <SuperTable
    :form-items="formItems"
    :columns="columns"
    :request="onRequest"
    :sortable="true"
    @row-sort-end="onRowSortEnd"
  />
</template>

<script setup>
const onRowSortEnd = newData => {
  console.log('排序后的数据:', newData)
  // 处理排序后的数据
}
</script>

表格配置

<template>
  <SuperTable :form-items="formItems" :columns="columns" :request="onRequest" :enable-table-config="true" />
</template>

自定义查询参数

<template>
  <SuperTable
    :form-items="formItems"
    :columns="columns"
    :request="onRequest"
    :custom-query-params="{ status: 1, type: 'active' }"
  />
</template>

插槽使用

<template>
  <SuperTable :form-items="formItems" :columns="columns" :request="onRequest">
    <!-- 场景选择器前的内容 -->
    <template #sceneAddonBefore>
      <a-button type="primary">自定义按钮</a-button>
    </template>

    <!-- 场景选择器后的内容 -->
    <template #sceneAddonAfter>
      <a-button>导出</a-button>
    </template>

    <!-- 表格头部 -->
    <template #tableHead>
      <h3>用户列表</h3>
    </template>

    <!-- 工具栏 -->
    <template #toolBar>
      <a-button type="primary">新增用户</a-button>
    </template>

    <!-- 表格底部 -->
    <template #tableFoot>
      <div>总计: {{ total }} 条数据</div>
    </template>

    <!-- 展开行 -->
    <template #expandedRowRender="{ record }">
      <p>详细信息: {{ record.description }}</p>
    </template>
  </SuperTable>
</template>

API

Props

| 参数 | 说明 | 类型 | 默认值 | | ----------------- | ---------------- | ----------------------------- | ------------------------------- | --------- | | formItems | 查询条件配置 | SuperTableFormItem[] | [] | | columns | 表格列配置 | SuperTableColumn[] | [] | | request | 数据请求函数 | SuperTableRequestFunction | - | | sceneType | 场景类型 | string | '' | | enableScene | 是否启用场景管理 | boolean | true | | sceneStorageType | 场景存储位置 | 'local' | 'api' | 'local' | | sceneRequest | 场景请求函数配置 | SceneRequestConfig | - | | defaultScene | 默认场景配置 | SuperTableDefaultSceneConfig | SuperTableDefaultSceneConfig[] | - | | maxSceneCount | 最大场景数量 | number | 100 | | formItemColSpan | 查询条件列数 | number | 6 | | debounceWait | 查询防抖时间(ms) | number | 100 | | refreshDeps | 依赖刷新选项 | any[] | [] | | tableProps | 表格属性 | TableProps | {} | | formatDataSource | 转换表格数据 | (data: any[]) => any[] | (data) => data | | sortable | 是否可排序 | boolean | false | | wrapperStyle | 容器样式 | object | {} | | tableWrapperStyle | 表格容器样式 | object | {} | | customQueryParams | 默认查询条件 | object | {} | | showRefreshButton | 展示刷新按钮 | boolean | false | | enableTableConfig | 开启表格设置 | boolean | true |

Events

| 事件名 | 说明 | 回调参数 | | ---------------- | ------------ | ------------------------------------------------------------------ | | form-item-change | 表单项值变更 | (name: string, value: any, formItem: SuperTableFormItem) => void | | scene-change | 场景切换 | (scene: SuperTableQueryScene) => void | | sort-change | 排序变化 | (sorter: any) => void | | row-sort-end | 行排序结束 | (newData: any[]) => void |

Methods

| 方法名 | 说明 | 参数 | | ---------------- | ---------------- | --------------------------------------------------------- | --------------------------------- | | getFormItem | 获取表单项配置 | (name: string) => SuperTableFormItem | undefined | | setFormItem | 设置表单项配置 | (name: string, keyPath: string, newConfig: any) => void | | getFormValue | 获取表单项值 | (name: string) => any | | setFormValue | 设置表单项值 | (name: string, value: any) => void | | getFormValues | 获取所有表单项值 | (name?: string | string[]) => Record<string, any> | | setFormValues | 批量设置表单项值 | (values: Record<string, any>) => void | | getTableData | 获取表格数据 | () => any[] | | setTableData | 设置表格数据 | (data: any[]) => void | | setTableDataItem | 修改单条数据 | (index: number, data: Record<string, any>) => void | | onRefresh | 刷新表格数据 | () => void | | onResetForm | 重置表单查询条件 | () => void |

TypeScript 类型定义

基础类型

/** 表格列对应的type类型 */
export type SuperTableColumnType = 'text' | 'link' | 'button' | 'tag' | 'image' | 'component' | 'sort'

/** 查询表单项对应的type类型 */
export type SuperTableFormItemType =
  | 'input'
  | 'inputGroup'
  | 'inputNumber'
  | 'inputNumberRange'
  | 'select'
  | 'treeSelect'
  | 'cascader'
  | 'datePicker'
  | 'rangePicker'
  | 'component'

/** 表格单条数据 */
export type SuperTableDataItem = Record<string, any>

/** 表格列吸附方式 */
export type SuperTableColumnFixedType = 'left' | 'right'

/** 排序方式 */
export type SuperTableSortOrders = 'ascend' | 'descend' | null

表格列配置

/** 表格列配置 */
export interface SuperTableColumn {
  /** 列对应key */
  key: string

  /** 展示类型 */
  type?: SuperTableColumnType | ((row: SuperTableDataItem, index: number) => SuperTableColumnType)

  /** 标题 */
  title: string

  /** 标题对应的提示信息 */
  titleTooltip?: string | ((row: SuperTableDataItem, index: number) => string)

  /** 表格内容 */
  content?: string | ((row: SuperTableDataItem, index: number) => any)

  /** 表格内容对应的提示信息 */
  tooltip?: string | boolean | ((row: SuperTableDataItem, index: number) => string)

  /** 表格内容解析自定义组件 */
  component?: Component

  /** 表格内容解析用到的组件组件对应的props */
  props?: Record<string, any> | ((row: SuperTableDataItem, index: number) => Record<string, any>)

  /** 是否可复制 */
  copyable?: boolean

  /** 是否超出显示省略号 */
  ellipsis?: boolean

  /** 是否可见 */
  visible?: boolean

  /** 宽度 */
  width?: number

  /** 固定列位置 */
  fixed?: SuperTableColumnFixedType

  [key: string]: any
}

查询条件配置

/** 查询条件配置 */
export interface SuperTableFormItem {
  /** 查询详类型 */
  type: SuperTableFormItemType

  /** 查询项对应的字段名称 */
  name: string

  /** 绑定数据时v-model对应的name，默认value */
  modelPropName?: string

  /** 查询项label */
  label: string

  /** 查询项提示信息，展示在标签旁的 tooltip 中 */
  tooltip?: string | number

  /** 传递给查询详的props */
  props?: Record<string, any>

  /** 选项值 */
  value?: any

  /** 自定义组件 */
  component?: Component

  /** 查询项宽度系数 */
  span?: number

  /** 是否显示 */
  visible?: boolean

  /** 带select前缀的组合输入框配置 */
  addonBeforeProps?: SelectProps

  /** input 的后置附加按钮配置 */
  addonAfter?: {
    /** 按钮文案 */
    text?: string
    /** 按钮自定义 class */
    className?: string
    /** 是否显示，默认 true */
    show?: boolean
    /** 是否禁用 */
    disabled?: boolean
    /** 点击回调 */
    onClick?: (context: { name: string; value: any; formItem: SuperTableFormItem }) => void
  }

  /** 改变时保持静默，不要触发搜索*/
  quiet?: boolean

  /** 是否展示label，默认展示 */
  showLabel?: boolean

  /** 固定选项，不允许删除，高级搜索时一定会默认展示 */
  fixed?: boolean

  /** 默认选中，开启后表现为
   * 1. 高级搜索弹窗打开时会默认选中对应的搜索项
   * 2. 没有配置默认场景时，会根据选中的项目生成一个默认场景 */
  selected?: boolean

  // 以下为内置属性，不允许修改
  /** 默认值 */
  _defaultValue?: any

  /** 排序 */
  _order?: number

  /** 是否选中 */
  _selected?: boolean

  /** 在选中场景中的排序 */
  _orderInScene?: number

  [key: string]: any
}

场景管理类型

/** 场景请求函数配置 */
export interface SceneRequestConfig {
  /** 查询场景列表 */
  querySceneList: (params: { type: string }) => Promise<IResponse>

  /** 创建场景 */
  createScene: (params: any) => Promise<IResponse>

  /** 更新场景 */
  updateScene: (params: any) => Promise<IResponse>

  /** 删除场景 */
  deleteScene: (params: string[]) => Promise<IResponse>
}

/** 接口响应数据结构 */
export interface IResponse {
  /** 状态码 */
  code: number

  /** 响应数据 */
  data: any

  /** 响应消息 */
  msg: string
}

/** 查询场景 */
export interface SuperTableQueryScene {
  /** 场景唯一标识 */
  code: string

  /** 场景名称 */
  name: string

  /** 配置类型 */
  type?: string

  /** 配置详情 */
  value?: string

  /** 查询项列表 */
  items: SuperTableQuerySceneItem[]

  /** 是否是私有配置 */
  asPrivate?: boolean

  /** 是否是自定义场景 */
  isCustom?: boolean
}

/** 场景中保存的查询条件配置 */
export interface SuperTableQuerySceneItem {
  /** 字段名称 */
  name: string

  /** 字段类型 */
  type: string

  /** 字段值 */
  value: any
}

/** 默认场景配置 */
export interface SuperTableDefaultSceneConfig {
  /** 场景名称 */
  name?: string

  /** 场景唯一表示，多个自定义场景时必填 */
  code?: string

  /** 查询项列表 */
  items: {
    /** 字段名称 */
    name: string
    /** 字段值 */
    value: any
  }[]
}

/** 场景状态 */
export interface SuperTableSceneState {
  /** 查询场景列表 */
  list: SuperTableQueryScene[]

  /** 是否正在加载场景 */
  loading: boolean

  /** 是否正在保存场景 */
  submiting: boolean

  /** 是否已经加载过场景 */
  loaded: boolean
}

数据请求类型

/** 数据请求方法 */
export type SuperTableRequestFunction = (options: {
  /** 查询参数 */
  params: Record<string, any>

  /** 分页大小 */
  pageSize?: number

  /** 当前页码 */
  pageNum?: number

  [key: string]: any
}) => Promise<{ total: number; data: Record<string, any>[] }>

/** 表格属性扩展 */
export interface SuperTableAntdProps extends TableProps {
  pagination: PaginationProps
  columns: SuperTableColumn[]
  dataSource: Record<string, any>[]
}

注意事项

1. 依赖要求：组件依赖于 Ant Design Vue，请确保项目中已安装相关依赖
2. TypeScript 支持：TypeScript 项目需要在 tsconfig.json 中配置类型声明文件路径
3. 自定义组件：自定义组件需要通过 component 属性传入，并确保组件已全局注册或局部引入
4. 场景管理：
   • 场景管理功能需要配置 sceneType 属性
   • 使用 local 存储模式时，场景数据保存在浏览器的 localStorage 中
   • 使用 api 存储模式时，必须提供 sceneRequest 配置，否则会禁用场景功能并在控制台输出错误信息
5. 性能优化：组件内置了防抖、虚拟滚动等性能优化，大数据量场景下表现良好
6. 响应式设计：组件支持响应式布局，可根据屏幕尺寸自动调整
7. 主题定制：支持通过 CSS 变量或 Ant Design 主题系统进行样式定制

更新日志

v0.1.10

• ✨ 新增列级自定义单元格插槽能力：支持在列配置中通过 slotName 指定外层具名插槽渲染
• 🔁 渲染优先级优化：命中 slotName 时优先插槽渲染，未命中时继续使用原有 type/component 渲染
• 🎨 样式优化：自定义插槽单元格新增容器，并默认 white-space: normal 以支持多行内容展示
• ✨ 查询条件新增 tooltip（string | number）能力：主页面与场景弹窗均支持 icon 悬浮提示（默认 top）
• 🎯 场景弹窗 tooltip 区域宽度统一预留：无 tooltip 时不展示 icon，但保留占位，避免布局抖动
• 🧩 示例补充：新增 slotName 列配置与多行列表插槽示例（含 badge/button/tag 等非纯文本元素）
• 📝 详细变更记录见 CHANGELOG.md

v0.0.7

• 🔄 重构场景管理API：
  • 将 sceneRequestUrls 重构为 sceneRequest
  • 从传递URL字符串改为传递请求函数，提供更大的灵活性
  • 支持自定义请求逻辑、错误处理和认证机制
• 🔧 优化错误处理：
  • 当 sceneStorageType 为 'api' 但未提供 sceneRequest 时，提供清晰的错误提示
  • 实现优雅降级，避免应用崩溃
• 🗑️ 移除冗余代码：
  • 删除 apiSceneService 中间层，直接使用 sceneRequest
  • 简化架构，提高代码可维护性
• 📚 完善文档：
  • 更新API文档和类型定义
  • 添加详细的配置示例和错误处理说明
  • 提供本地存储和API存储两种模式的完整示例
• 🖼️ 修复文档图片：
  • 修复 npm 包中示例图片无法显示的问题
  • 使用 CDN 方式确保图片在不同平台都能正确显示

v0.0.6

• 🐛 修复场景管理相关问题
• 🐛 修复表格列配置缓存问题
• 💄 优化UI样式和交互体验

v0.0.2

• ✨ 新增表格拖拽排序功能
• ✨ 新增表格配置功能
• ✨ 新增自定义查询参数支持
• ✨ 新增多种插槽支持
• ✨ 新增级联选择和树形选择组件
• 🐛 修复场景管理相关问题
• 🐛 修复表格列配置缓存问题
• 💄 优化UI样式和交互体验
• 📚 完善TypeScript类型定义
• 📚 更新文档和示例代码

更新记录

0.1.6

• 🐛 修复依赖问题：将 jsonpath-plus 从 optionalDependencies 移到 dependencies，解决其他项目使用 npm ci 时的依赖缺失问题
• ✨ 优化场景初始化：当没有选中过场景 code 且有默认场景时，自动选中默认场景并触发查询
• 📝 示例代码优化：
  • 添加默认场景配置示例
  • 新增清空缓存功能
  • 场景功能默认开启

0.1.2

• 新增 tableWrapperStyle 属性，支持自定义表格容器样式。
• 修复 toolBarExtra 插槽在未提供 tableHead 时无法展示的问题。
• 修复 rowKey 为函数时构建声明文件的类型错误。