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?(v1: any, v2: 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 {}