vxe-table-demonic/types/colgroup.d.ts

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...

import { VXEComponent } from './component'
import { VxeTableDataRow } from './table'
import { VxeColumnPropTypes, VxeColumnSlotTypes } from './column'

/* eslint-disable no-use-before-define */

/**
 * 组件 - 表格分组列
 * @example import { VxeColgroup } from 'vxe-components'
 */
export const VxeColgroup: VXEComponent<VxeColgroupProps, VxeColgroupEventProps, VxeColgroupSlots<any>>
/**
 * 组件 - 表格分组列
 */
export const Colgroup: typeof VxeColgroup

export type VxeColgroupProps = {
  /**
   * 渲染类型
   */
  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
  /**
   * 当内容过长时显示为省略号
   */
  showOverflow?: VxeColumnPropTypes.ShowOverflow
  /**
   * 当表头内容过长时显示为省略号
   */
  showHeaderOverflow?: VxeColumnPropTypes.ShowHeaderOverflow
  /**
   * 给单元格附加 className
   */
  className?: VxeColumnPropTypes.ClassName
  /**
   * 给表头单元格附加 className
   */
  headerClassName?: VxeColumnPropTypes.HeaderClassName
  /**
   * 是否可视
   */
  visible?: VxeColumnPropTypes.Visible
  /**
   * 额外的参数
   */
  params?: VxeColumnPropTypes.Params
}

export type VxeColgroupEventProps = {
  //
}

export interface VxeColgroupSlots<D = VxeTableDataRow> {
  /**
   * 自定义表头内容的模板
   */
  header: (params: VxeColumnSlotTypes.HeaderSlotParams<D>) => any
  /**
   * 只对 type=checkbox,radio 有效，自定义标题模板
   */
  title: (params: VxeColumnSlotTypes.HeaderSlotParams<D>) => any
}