vxe-table/types/column.d.ts

import { VNode } from 'vue'
import { VXEComponent } from './component'
import { VxeTableConstructor, VxeTableDefines, VxeTablePropTypes } from './table'
import { VxeGlobalRendererHandles } from './v-x-e-table'
import { VxeFilterPanel } from './filter'
import { VxeTooltipPropTypes } from './tooltip'

/**
 * 组件 - 表格列
 * @example import { Column as VxeColumn } from 'vxe-table'
 */
export const Column: VXEComponent<VxeColumnProps>

export namespace VxeColumnPropTypes {
  export type ColId = string | number
  export type Type = 'seq' | 'radio' | 'checkbox' | 'expand' | 'html' | null
  export type Field = string
  export type Title = string
  export type Width = number | string
  export type MinWidth = number | string
  export type Resizable = boolean
  export type Fixed = 'left' | 'right' | null
  export type Align = 'left' | 'center' | 'right' | null
  export type HeaderAlign = Align
  export type FooterAlign = Align
  export type ShowOverflow = VxeTablePropTypes.ShowOverflow
  export type ShowHeaderOverflow = ShowOverflow
  export type ShowFooterOverflow = ShowOverflow
  export type ClassName = string | ((params: VxeGlobalRendererHandles.RenderCellParams) => string | any[] | { [key: string]: boolean })
  export type HeaderClassName = string | ((params: VxeGlobalRendererHandles.RenderHeaderParams) => string | any[] | { [key: string]: boolean })
  export type FooterClassName = string | ((params: VxeGlobalRendererHandles.RenderFooterParams) => string | any[] | { [key: string]: boolean })

  export type Formatter = ((params: {
    cellValue: any
    column: VxeTableDefines.ColumnInfo
    row: any
  }) => string | number) | any[] | string

  export type Sortable = boolean
  export type SortBy = string | ((params: {
    row: any
    column: VxeTableDefines.ColumnInfo
  }) => string | number)
  export type SortType = 'string' | 'number' | null

  export interface Filter {
    label?: string | number
    value?: any
    data?: any
    resetValue?: any
    checked?: boolean
  }
  export type Filters = Filter[]

  export type FilterMultiple = boolean

  interface FilterMethodParams {
    $table: VxeTableConstructor,
    value: any
    option: VxeTableDefines.FilterOption
    cellValue: any
    row: any
    column: VxeTableDefines.ColumnInfo
  }
  export type FilterMethod = (params: FilterMethodParams) => boolean

  interface FilterResetMethodParams {
    options: VxeTableDefines.FilterOption[]
    column: VxeTableDefines.ColumnInfo
  }
  export type FilterResetMethod = (params: FilterResetMethodParams) => void

  interface FilterRecoverMethodParams {
    option: VxeTableDefines.FilterOption
    column: VxeTableDefines.ColumnInfo
  }
  export type FilterRecoverMethod = (params: FilterRecoverMethodParams) => void

  /**
   * 筛选渲染配置项
   */
  export interface FilterRender extends VxeGlobalRendererHandles.RenderOptions {
    options?: any[]
    optionProps?: VxeGlobalRendererHandles.RenderOptionProps
    optionGroups?: any[]
    optionGroupProps?: VxeGlobalRendererHandles.RenderOptionGroupProps
    content?: string
  }

  export type TreeNode = boolean
  export type Visible = boolean

  interface ExportMethodParams {
    $table: VxeTableConstructor,
    row: any
    column: VxeTableDefines.ColumnInfo
  }
  export type ExportMethod = (params: ExportMethodParams) => string | number

  interface FooterExportParams {
    $table: VxeTableConstructor,
    items: any[]
    column: VxeTableDefines.ColumnInfo
    _columnIndex: number
  }
  export type FooterExportMethod = (params: FooterExportParams) => string | number

  export interface TitlePrefix {
    useHTML?: VxeTooltipPropTypes.UseHTML
    content?: VxeTooltipPropTypes.Content
    enterable?: VxeTooltipPropTypes.Enterable
    theme?: VxeTooltipPropTypes.Theme
    icon?: string
    /**
     * @deprecated 已废弃，请使用 content
     */
    message?: string
  }

  export interface TitleHelp extends TitlePrefix {}

  export type CellType = 'auto' | 'number' | 'string'

  export interface CellRender extends VxeGlobalRendererHandles.RenderOptions {
    events?: { [key: string]: (cellParams: DefaultSlotParams, ...args: any[]) => any }
    options?: any[]
    optionProps?: VxeGlobalRendererHandles.RenderOptionProps
    optionGroups?: any[]
    optionGroupProps?: VxeGlobalRendererHandles.RenderOptionGroupProps
    content?: string
  }

  /**
   * 编辑渲染配置项
   */
  export interface EditRender extends VxeGlobalRendererHandles.RenderOptions {
    events?: { [key: string]: (cellParams: EditSlotParams, ...args: any[]) => any }
    enabled?: boolean
    options?: any[]
    optionProps?: VxeGlobalRendererHandles.RenderOptionProps
    optionGroups?: any[]
    optionGroupProps?: VxeGlobalRendererHandles.RenderOptionGroupProps
    autofocus?: string
    autoselect?: boolean
    defaultValue?: ((params: { column: VxeTableDefines.ColumnInfo }) => any) | null | undefined | string | number | RegExp | object | any[] | Date
    immediate?: boolean
    content?: string
    placeholder?: string
  }

  /**
   * 内容渲染配置项
   */
  export interface ContentRender extends VxeGlobalRendererHandles.RenderOptions {
    options?: any[]
    optionProps?: VxeGlobalRendererHandles.RenderOptionProps
    optionGroups?: any[]
    optionGroupProps?: VxeGlobalRendererHandles.RenderOptionGroupProps
  }

  export type Params = any

  interface FilterSlotParams {
    $panel: VxeFilterPanel
    column: {
      filters: VxeTableDefines.FilterOption[]
    } & VxeTableDefines.ColumnInfo
    columnIndex: number
    $columnIndex: number
    $rowIndex: number
  }

  interface EditSlotParams {
    column: VxeTableDefines.ColumnInfo
    columnIndex: number
    $columnIndex: number
    row: any
    rowIndex: number
    $rowIndex: number
  }

  interface FooterSlotParams {
    column: VxeTableDefines.ColumnInfo
    columnIndex: number
    _columnIndex: number
    $columnIndex: number
    $rowIndex: number
    items: any[]
    data: any[][]
  }

  interface HeaderSlotParams extends VxeTableDefines.CellRenderHeaderParams { }

  interface ContentSlotParams {
    column: VxeTableDefines.ColumnInfo
    columnIndex: number
    $columnIndex: number
    row: any
    rowIndex: number
    $rowIndex: number
    isHidden: boolean
    fixed: VxeColumnPropTypes.Fixed
    type: string
  }

  interface DefaultSlotParams extends VxeTableDefines.CellRenderBodyParams { }

  interface IconSlotParams extends DefaultSlotParams { }

  export type Slots = {
    title?: string | ((params: HeaderSlotParams) => JSX.Element[] | VNode[] | string[]) | null
    radio?: string | ((params: DefaultSlotParams) => JSX.Element[] | VNode[] | string[]) | null
    checkbox?: string | ((params: DefaultSlotParams) => JSX.Element[] | VNode[] | string[]) | null
    default?: string | ((params: DefaultSlotParams) => JSX.Element[] | VNode[] | string[]) | null
    header?: string | ((params: HeaderSlotParams) => JSX.Element[] | VNode[] | string[]) | null
    footer?: string | ((params: FooterSlotParams) => JSX.Element[] | VNode[] | string[]) | null
    content?: string | ((params: ContentSlotParams) => JSX.Element[] | VNode[] | string[]) | null
    filter?: string | ((params: FilterSlotParams) => JSX.Element[] | VNode[] | string[]) | null
    edit?: string | ((params: EditSlotParams) => JSX.Element[] | VNode[] | string[]) | null
    icon?: string | ((params: IconSlotParams) => JSX.Element[] | VNode[] | string[]) | null
  }
}

export type VxeColumnProps = {
  colId?: VxeColumnPropTypes.ColId
  /**
   * 渲染类型
   */
  type?: VxeColumnPropTypes.Type
  /**
   * 列字段名
   */
  field?: VxeColumnPropTypes.Field
  /**
   * 列标题
   */
  title?: VxeColumnPropTypes.Title
  /**
   * 列宽度
   */
  width?: VxeColumnPropTypes.Width
  /**
   * 列最小宽度，把剩余宽度按比例分配
   */
  minWidth?: VxeColumnPropTypes.MinWidth
  /**
   * 是否允许拖动列宽调整大小
   */
  resizable?: VxeColumnPropTypes.Resizable
  /**
   * 将列固定在左侧或者右侧
   */
  fixed?: VxeColumnPropTypes.Fixed
  /**
   * 列对其方式
   */
  align?: VxeColumnPropTypes.Align
  /**
   * 表头对齐方式
   */
  headerAlign?: VxeColumnPropTypes.HeaderAlign
  /**
   * 表尾列的对齐方式
   */
  footerAlign?: VxeColumnPropTypes.FooterAlign
  /**
   * 当内容过长时显示为省略号
   */
  showOverflow?: VxeColumnPropTypes.ShowOverflow
  /**
   * 当表头内容过长时显示为省略号
   */
  showHeaderOverflow?: VxeColumnPropTypes.ShowHeaderOverflow
  /**
   * 当表尾内容过长时显示为省略号
   */
  showFooterOverflow?: VxeColumnPropTypes.ShowFooterOverflow
  /**
   * 给单元格附加 className
   */
  className?: VxeColumnPropTypes.ClassName
  /**
   * 给表头单元格附加 className
   */
  headerClassName?: VxeColumnPropTypes.HeaderClassName
  /**
   * 给表尾单元格附加 className
   */
  footerClassName?: VxeColumnPropTypes.FooterClassName
  /**
   * 格式化显示内容
   */
  formatter?: VxeColumnPropTypes.Formatter
  /**
   * 是否允许排序
   */
  sortable?: VxeColumnPropTypes.Sortable
  /**
   * 自定义排序的属性
   */
  sortBy?: VxeColumnPropTypes.SortBy
  /**
   * 排序的字段类型，比如字符串转数值等
   */
  sortType?: VxeColumnPropTypes.SortType
  /**
   * 配置筛选条件数组
   */
  filters?: VxeColumnPropTypes.Filter[]
  /**
   * 筛选是否允许多选
   */
  filterMultiple?: VxeColumnPropTypes.FilterMultiple
  /**
   * 自定义筛选方法
   */
  filterMethod?: VxeColumnPropTypes.FilterMethod
  /**
   * 筛选模板配置项
   */
  filterRender?: VxeColumnPropTypes.FilterRender
  /**
   * 指定为树节点
   */
  treeNode?: VxeColumnPropTypes.TreeNode
  /**
   * 是否可视
   */
  visible?: VxeColumnPropTypes.Visible
  /**
   * 自定义单元格数据导出方法
   */
  exportMethod?: VxeColumnPropTypes.ExportMethod
  /**
   * 自定义表尾单元格数据导出方法
   */
  footerExportMethod?: VxeColumnPropTypes.FooterExportMethod
  /**
   * 已废弃，被 titlePrefix 替换
   * @deprecated
   */
  titleHelp?: VxeColumnPropTypes.TitleHelp
  /**
   * 标题帮助图标配置项
   */
  titlePrefix?: VxeColumnPropTypes.TitlePrefix
  /**
   * 单元格值类型
   */
  cellType?: VxeColumnPropTypes.CellType
  /**
   * 单元格渲染配置项
   */
  cellRender?: VxeColumnPropTypes.CellRender
  /**
   * 单元格编辑渲染配置项
   */
  editRender?: VxeColumnPropTypes.EditRender
  /**
   * 内容渲染配置项
   */
  contentRender?: VxeColumnPropTypes.ContentRender
  /**
   * 额外的参数
   */
  params?: VxeColumnPropTypes.Params
}