vue-table-solution v1.0.8

vue-table-solution

vue-table-solution 是 基于 Vue 3 + Vite 4 + Ant Design Vue 3 + Surely Vue Table 实现的“高端”组件。致力于解决大数据渲染、图表集成等复杂高频问题。 使用该组件可以流畅滚动 10 万行、10 万列的数据，你不必担心页面卡顿造成用户投诉，进而影响业务进展。

vue-table-solution 默认使用虚拟滚动提升渲染速度，树形数据、展开内容、嵌套子表格、行列合并、自动行高、横向、纵向、吸顶、固定头、固定列等等一切都支持虚拟滚动。

功能点

以下是当前已经支持和正在开发中的功能：

API

Table

• expandFixed
  • 当设置为 true 或 left 且 expandIconColumnIndex 未设置或为 0 时，开启固定
  • 当设置为 true 或 right 且 expandIconColumnIndex 设置为表格列数时，开启固定

事件

方法

customRow 用法

适用于 customRow customCell customHeaderCell。遵循Vue jsx语法。

<Table
  customRow={(record) => {
    return {
      xxx... //属性
      onClick: (event) => {},       // 点击行
      onDblclick: (event) => {},
      onContextmenu: (event) => {},
      onMouseenter: (event) => {},  // 鼠标移入行
      onMouseleave: (event) => {}
    };
  }}
/>

Column

列描述数据对象，是 columns 中的一项，Column 使用相同的 API。

Breakpoint

export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'

CellTooltip

export interface CellTooltip {
  placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
  color?: String
  overlayStyle?: CSSProperties
  overlayClassName?: String
  openClassName?: String
  title?: (args: CellRenderArgs) => any
  align?: TooltipAlignConfig
}

RowDragGhostArg

interface DragRowsHandleInfo {
  y: number
  top: number
  height: number
  rowKey: Key
  centerY: number
  record: DefaultRecordType
  indexs: number[] // 这是一个索引数组，用以支持树形结构
}

export interface RowDragGhostArg<RecordT, ColumnT> {
  record: RecordT
  column: ColumnT
  icon: VNode
  allowed: boolean
  dragging: boolean
  event: MouseEvent | Touch
  preTargetInfo: DragRowsHandleInfo | null
  nextTargetInfo: DragRowsHandleInfo | null
}

DragRowEventInfo

export interface DragRowEventInfo {
  top: number
  height: number
  record: DefaultRecordType
  dir: 'down' | 'up'
  rowKey: Key
  event: MouseEvent | Touch
  column: ColumnType
  preTargetInfo: DragRowsHandleInfo | null
  nextTargetInfo: DragRowsHandleInfo | null
  fromIndexs: number[] // 这是一个索引数组，用以支持树形结构
  insertToRowKey: Key
}

DragColumnEventInfo

export interface DragColumnEventInfo {
  event: MouseEvent | Touch
  column: ColumnType
  targetColumn: ColumnType
  dir: 'left' | 'right'
}

ColumnDragGhostArg

export interface ColumnDragGhostArg<ColumnT> {
  column: ColumnT
  icon: VNode
  allowed: boolean
  dragging: boolean
  event: MouseEvent | Touch
  targetColumn: ColumnT
}

ColumnGroup

loading

tooltip

pagination

分页的配置项。

rowSelection

选择功能的配置。

scroll

selection

自定义选择配置项

FilterDropdownProps

interface FilterDropdownProps {
  prefixCls: string
  setSelectedKeys: (selectedKeys: Key[]) => void
  selectedKeys: Key[]
  confirm: (param?: FilterConfirmProps) => void
  clearFilters?: () => void
  filters?: ColumnFilterItem[]
  visible: boolean
  column: ColumnType
}

注意

在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。若没有指定，控制台会出现缺少 key 的提示，表格组件也会出现各类奇怪的错误。

// 比如你的数据主键是 uid
return <Table rowKey="uid" />
// 或
return <Table rowKey={(record) => record.uid} />