Table Props 表格配置
ts
export type StkProps = {
width?: string;
/** 最小表格宽度 */
minWidth?: string;
/** 表格最大宽度*/
maxWidth?: string;
/** 斑马线条纹 */
stripe?: boolean;
/** 是否使用 table-layout:fixed */
fixedMode?: boolean;
/** 是否隐藏表头 */
headless?: boolean;
/** 主题,亮、暗 */
theme?: 'light' | 'dark';
/**
* 行高
* - `props.autoRowHeight` 为 `true` 时,将表示为期望行高,用于计算。不再影响实际行高。
*/
rowHeight?: number;
/**
* 是否可变行高
* - 设置为 `true` 时, `props.rowHeight` 将表示为期望行高,用于计算。不再影响实际行高。
*/
autoRowHeight?: boolean | {
/** 预估行高(优先级高于rowHeight) */
expectedHeight?: number | ((row: DT, index: number) => number);
};
/** 是否高亮鼠标悬浮的行 */
rowHover?: boolean;
/** 是否高亮选中的行 */
rowActive?: boolean;
/** 当前行再次点击否可以取消 (rowActive=true)*/
rowCurrentRevokable?: boolean;
/** 表头行高。default = rowHeight */
headerRowHeight?: number | null;
/** 虚拟滚动 */
virtual?: boolean;
/** x轴虚拟滚动(必须设置列宽)*/
virtualX?: boolean;
/** 表格列配置 */
columns?: StkTableColumn<any>[];
/** 表格数据源 */
dataSource?: any[];
/** 行唯一键 (行唯一值不能为undefined)*/
rowKey?: UniqKeyProp;
/** 列唯一键。默认`dataIndex`*/
colKey?: UniqKeyProp;
/** 空值展示文字 */
emptyCellText?: string | ((option: { row: DT; col: StkTableColumn<DT> }) => string);
/** 暂无数据兜底高度是否撑满 */
noDataFull?: boolean;
/** 是否展示暂无数据 */
showNoData?: boolean;
/** 是否服务端排序,true则不排序数据 */
sortRemote?: boolean;
/** 表头是否溢出展示... */
showHeaderOverflow?: boolean;
/** 表体溢出是否展示... */
showOverflow?: boolean;
/** 是否增加行hover class */
showTrHoverClass?: boolean;
/** 是否高亮鼠标悬浮的单元格 */
cellHover?: boolean;
/** 是否高亮选中的单元格 */
cellActive?: boolean;
/** 单元格再次点击否可以取消选中 (cellActive=true)*/
selectedCellRevokable?: boolean;
/** 表头是否可拖动。支持回调函数。 */
headerDrag?:
| boolean
| {
/**
* 列交换模式
* - none - 不做任何事
* - insert - 插入(默认值)
* - swap - 交换
*/
mode?: 'none' | 'insert' | 'swap';
/** 禁用拖动的列 */
disabled?: (col: StkTableColumn<DT>) => boolean;
};
/**
* 给行附加className<br>
* FIXME: 是否需要优化,因为不传此prop会使表格行一直执行空函数,是否有影响
*/
rowClassName?: (row: any, i: number) => string;
/**
* 列宽是否可拖动(需要设置v-model:columns)<br>
* **不要设置**列minWidth,**必须**设置width<br>
* 列宽拖动时,每一列都必须要有width,且minWidth/maxWidth不生效。table width会变为"fit-content"。
* - 会自动更新props.columns中的with属性
*/
colResizable?: boolean;
/** 可拖动至最小的列宽 */
colMinWidth?: number;
/**
* 单元格分割线。
* 默认横竖都有
* "h" - 仅展示横线
* "v" - 仅展示竖线
* "body-v" - 仅表体展示竖线
*/
bordered?: boolean | 'h' | 'v' | 'body-v';
/**
* 自动重新计算虚拟滚动高度宽度。默认true
* [非响应式]
* 传入方法表示resize后的回调
*/
autoResize?: boolean | (() => void);
/** 是否展示固定列阴影。为节省性能,默认false。 */
fixedColShadow?: boolean;
/** 优化vue2 滚动 */
optimizeVue2Scroll?: boolean;
/** 排序配置 */
sortConfig?: {
/** 空值是否排最下面 */
emptyToBottom: boolean,
/** 默认排序(1.初始化时触发 2.排序方向为null时触发) */
defaultSort?: {
dataIndex: keyof T;
order: Order;
};
/**
* string排序是否使用 String.prototype.localCompare
* 默认true (历史设计问题,为了兼容,默认true)
*/
stringLocaleCompare?: boolean;
},
/** 隐藏头部鼠标悬浮title。可传入dataIndex数组 */
hideHeaderTitle?: boolean | string[];
/** 高亮配置 */
highlightConfig?: {
/** 高亮持续时间(s) */
duration?: number;
/** 高亮帧率*/
fps?: number;
};
/** 序号列配置 */
seqConfig?: {
/** 序号列起始下标 用于适配分页 */
startIndex?: number;
};
/** 展开行配置 */
expandConfig?: {
height?: number;
};
/** 行拖动配置 */
dragRowConfig?: {
mode?: 'none' | 'insert' | 'swap';
};
/**
* 固定头,固定列实现方式。
* [非响应式]
* relative:固定列只能放在props.columns的两侧。
* - 如果列宽会变动则谨慎使用。
* - 多级表头固定列慎用
*
* 低版本浏览器只能为'relative',
*/
cellFixedMode?: 'sticky' | 'relative';
/**
* 是否平滑滚动
* - default: chrome < 85 || chrome > 120 ? true : false
* - false: 使用 wheel 事件滚动。为了防止滚动过快导致白屏。
* - true: 不使用 wheel 事件滚动。滚轮滚动时更加平滑。滚动过快时会白屏。
*/
smoothScroll?: boolean;
};