vxe-table/types/column.d.ts

import { CreateElement, VNode } from 'vue'
import { VXETableModule } from './component'
import { TableRenderParams } from './table'
import { ColumnFilterOption, ColumnFilterParams, ColumnFilterRenderOptions, ColumnFilterSlotParams } from './extends/filter'
import { RenderOptions, OptionProps, OptionGroupProps } from './extends/renderer'
import { ColumnHeaderSlotParams } from './extends/header'
import { ColumnFooterSlotParams } from './extends/footer'
import { ColumnEditRenderOptions, ColumnEditSlotParams } from './extends/edit'

/**
 * 列
 */
export declare class Column extends VXETableModule {
  /**
   * 渲染类型
   */
  type?: 'index' | 'radio' | 'checkbox' | 'expand' | 'html';
  /**
   * 列字段名
   */
  field?: string;
  /**
   * 列标题
   */
  title?: string;
  /**
   * 列宽度
   */
  width?: number | string;
  /**
   * 列最小宽度，把剩余宽度按比例分配
   */
  minWidth?: number | string;
  /**
   * 是否允许拖动列宽调整大小
   */
  resizable?: boolean;
  /**
   * 将列固定在左侧或者右侧
   */
  fixed?: 'left' | 'right';
  /**
   * 列对其方式
   */
  align?: 'left' | 'center' | 'right';
  /**
   * 表头对齐方式
   */
  headerAlign?: 'left' | 'center' | 'right';
  /**
   * 表尾列的对齐方式
   */
  footerAlign?: string;
  /**
   * 当内容过长时显示为省略号
   */
  showOverflow?: boolean | string;
  /**
   * 当表头内容过长时显示为省略号
   */
  showHeaderOverflow?: boolean | string;
  /**
   * 当表尾内容过长时显示为省略号
   */
  showFooterOverflow?: boolean | string;
  /**
   * 给单元格附加 className
   */
  className?: string | Function;
  /**
   * 给表头单元格附加 className
   */
  headerClassName?: string | Function;
  /**
   * 给表尾单元格附加 className
   */
  footerClassName?: string | Function;
  /**
   * 格式化显示内容
   */
  formatter?: Function | any[] | string;
  /**
   * 自定义索引方法
   */
  seqMethod?: Function;
  /**
   * 是否允许排序
   */
  sortable?: boolean;
  /**
   * 是否服务端排序
   */
  remoteSort?: boolean;
  /**
   * 自定义排序的属性
   */
  sortBy?: string | string[];
  /**
   * 自定义排序方法
   */
  sortMethod?(a: any, b: any): boolean;
  /**
   * 配置筛选条件数组
   */
  filters?: ColumnFilterOption[];
  /**
   * 筛选是否允许多选
   */
  filterMultiple?: boolean;
  /**
   * 自定义筛选方法
   */
  filterMethod?: Function;
  /**
   * 筛选模板配置项
   */
  filterRender?: ColumnFilterRenderOptions;
  /**
   * 指定为树节点
   */
  treeNode?: boolean;
  /**
   * 是否可视
   */
  visible?: boolean;
  /**
   * 单元格渲染配置项
   */
  cellRender?: ColumnCellRenderOptions;
  /**
   * 单元格编辑渲染配置项
   */
  editRender?: ColumnEditRenderOptions;
  /**
   * 内容渲染配置项
   */
  contentRender?: ColumnContentRenderOptions;
  /**
   * 额外的参数
   */
  params?: any;
}

export interface ColumnOptions {
  /**
   * 渲染类型
   */
  type?: 'index' | 'radio' | 'checkbox' | 'expand' | 'html';
  /**
   * 列字段名
   */
  field?: string;
  /**
   * 列标题
   */
  title?: string;
  /**
   * 列宽度
   */
  width?: number | string;
  /**
   * 列最小宽度，把剩余宽度按比例分配
   */
  minWidth?: number | string;
  /**
   * 是否允许拖动列宽调整大小
   */
  resizable?: boolean;
  /**
   * 将列固定在左侧或者右侧
   */
  fixed?: 'left' | 'right';
  /**
   * 列对其方式
   */
  align?: 'left' | 'center' | 'right';
  /**
   * 表头对齐方式
   */
  headerAlign?: 'left' | 'center' | 'right';
  /**
   * 表尾列的对齐方式
   */
  footerAlign?: string;
  /**
   * 当内容过长时显示为省略号
   */
  showOverflow?: boolean | string;
  /**
   * 当表头内容过长时显示为省略号
   */
  showHeaderOverflow?: boolean | string;
  /**
   * 当表尾内容过长时显示为省略号
   */
  showFooterOverflow?: boolean | string;
  /**
   * 给单元格附加 className
   */
  className?: string | Function;
  /**
   * 给表头单元格附加 className
   */
  headerClassName?: string | Function;
  /**
   * 给表尾单元格附加 className
   */
  footerClassName?: string | Function;
  /**
   * 格式化显示内容
   */
  formatter?: Function | any[] | string;
  /**
   * 自定义索引方法
   */
  seqMethod?: Function;
  /**
   * 是否允许排序
   */
  sortable?: boolean;
  /**
   * 是否服务端排序
   */
  remoteSort?: boolean;
  /**
   * 自定义排序的属性
   */
  sortBy?: string | string[];
  /**
   * 自定义排序方法
   */
  sortMethod?(a: any, b: any): boolean;
  /**
   * 配置筛选条件数组
   */
  filters?: ColumnFilterOption[];
  /**
   * 筛选是否允许多选
   */
  filterMultiple?: boolean;
  /**
   * 自定义筛选方法
   */
  filterMethod?: Function;
  /**
   * 筛选模板配置项
   */
  filterRender?: ColumnFilterRenderOptions;
  /**
   * 指定为树节点
   */
  treeNode?: boolean;
  /**
   * 是否可视
   */
  visible?: boolean;
  /**
   * 单元格渲染配置项
   */
  cellRender?: ColumnCellRenderOptions;
  /**
   * 单元格编辑渲染配置项
   */
  editRender?: ColumnEditRenderOptions;
  /**
   * 内容渲染配置项
   */
  contentRender?: ColumnContentRenderOptions;
  /**
   * 额外的参数
   */
  params?: any;

  slots?: {
    default?(params: ColumnDefaultSlotParams, h: CreateElement): VNode[] | string[];
    header?(params: ColumnHeaderSlotParams, h: CreateElement): VNode[] | string[];
    footer?(params: ColumnFooterSlotParams, h: CreateElement): VNode[] | string[];
    content?(params: ColumnContentSlotParams, h: CreateElement): VNode[] | string[];
    filter?(params: ColumnFilterSlotParams, h: CreateElement): VNode[] | string[];
    edit?(params: ColumnEditSlotParams, h: CreateElement): VNode[] | string[];
    icon?(params: ColumnIconSlotParams, h: CreateElement): VNode[] | string[];
  };
}

export interface ColumnDefaultSlotParams extends ColumnCellRenderParams {}
export interface ColumnContentSlotParams extends ColumnContentRenderParams {}
export interface ColumnIconSlotParams extends ColumnIconRenderParams {}

/**
 * 列对象
 */
export class ColumnConfig {
  id: string;
  title: string;
  width: number | string;
  minWidth: number | string;
  resizable: boolean;
  property: string;
  type: string;
  sortable: boolean;
  visible: boolean;
  defaultVisible: any;
  checked: boolean;
  disabled: boolean;
  treeNode: boolean;
  filters: ColumnFilterParams[];
  filterRender: ColumnFilterRenderOptions;
  cellRender: ColumnCellRenderOptions;
  editRender: ColumnEditRenderOptions;
  contentRender: ColumnContentRenderOptions;
  order: string;
  renderWidth: number;
  renderHeight: number;
  resizeWidth: number;

  getTitle(): string;
}

/**
 * 默认的渲染配置项
 */
export interface ColumnCellRenderOptions extends RenderOptions {
  /**
   * 下拉选项列表（需要渲染器支持）
   */
  options?: { [key: string]: any }[];
  /**
   * 下拉选项属性参数配置（需要渲染器支持）
   */
  optionProps?: OptionProps;
  /**
   * 下拉分组选项列表（需要渲染器支持）
   */
  optionGroups?: { [key: string]: any }[];
  /**
   * 下拉分组选项属性参数配置（需要渲染器支持）
   */
  optionGroupProps?: OptionGroupProps;
  /**
   * 渲染组件的内容（需要渲染器支持）
   */
  content?: string;
}

/**
 * 内容渲染配置项
 */
export interface ColumnContentRenderOptions extends RenderOptions {
  /**
   * 下拉选项列表（需要渲染器支持）
   */
  options?: { [key: string]: any }[];
  /**
   * 下拉选项属性参数配置（需要渲染器支持）
   */
  optionProps?: OptionProps;
  /**
   * 下拉分组选项列表（需要渲染器支持）
   */
  optionGroups?: { [key: string]: any }[];
  /**
   * 下拉分组选项属性参数配置（需要渲染器支持）
   */
  optionGroupProps?: OptionGroupProps;
}

/**
 * 单元格渲染参数
 */
export interface ColumnCellRenderParams extends TableRenderParams {
  /**
   * 列对象
   */
  column: ColumnConfig;
  /**
   * 相对于 columns 中的索引
   */
  columnIndex: number;
  /**
   * 相对于可视区渲染中的列索引
   */
  $columnIndex: number;
  /**
   * 行数据对象
   */
  row: any;
  /**
   * 相对于 data 中的索引
   */
  rowIndex: number;
  /**
   * 相对于当前表格数据的索引
   */
  $rowIndex: number;
}

export interface ColumnContentRenderParams extends ColumnCellRenderParams {}
export interface ColumnIconRenderParams extends ColumnCellRenderParams {}