ivue-material-plus
Version:
A high quality UI components Library with Vue.js
341 lines (340 loc) • 8.33 kB
TypeScript
import type { VNode, ComponentInternalInstance, Ref, PropType } from 'vue';
import type { Table, TableRefs } from '../table/defaults';
declare type SlotsContent = {
column: TableColumnCtx;
$index: number;
};
declare type FilterMethods = (value: any, row: any, column: TableColumnCtx) => void;
declare type Filters = {
text: string;
value: string;
}[];
interface TableColumnCtx {
id: string;
prop: string;
label: string;
width: string | number;
minWidth: string | number;
children?: TableColumnCtx[];
isSubColumn: boolean;
type: string;
sortable: boolean | string;
property: string;
align: string;
headerAlign: string;
showOverflowTooltip: boolean;
filters: Filters;
filterMethod: FilterMethods;
filterPlacement: string;
filterOpened?: boolean;
index: number | ((index: number) => number);
rawColumnKey: string;
renderHeader: (data: SlotsContent) => VNode;
renderCell: (data: any) => void;
formatter: (row: Record<string, any>, column: TableColumnCtx, cellValue: any, index: number) => VNode | string;
columnWidth: number;
className: string;
fixed: boolean | string;
getColumnIndex: () => number;
currentIndex: number;
level: number;
rowSpan: number;
colSpan: number;
order: string | null;
labelClassName: string;
columns: TableColumnCtx[];
resizable: boolean;
selectable: (row: any, index: number | string) => boolean;
reserveSelection: boolean;
sortOrders: ('ascending' | 'descending' | null)[];
sortBy: string | ((row: any, index: number) => string) | string[];
sortMethod: (a: any, b: any) => number;
columnKey: string;
filterable: boolean | FilterMethods | Filters;
filterMultiple: boolean;
filteredValue: string[];
}
interface TableColumn extends ComponentInternalInstance {
vnode: {
vParent: TableColumn | Table;
} & VNode;
vParent: TableColumn | Table;
columnId: string;
columnConfig: Ref<Partial<TableColumnCtx>>;
}
interface ColumnParent {
columnConfig?: Ref<Partial<TableColumnCtx>>;
tableId?: string;
vnode?: {
vParent?: TableColumn | Table;
} & VNode;
parent?: Table;
refs?: TableRefs;
columnId?: string;
}
export type { TableColumnCtx, TableColumn, ColumnParent };
declare const _default: {
/**
* 对应列的类型
*
* selection / index / expand
*
* @type {String}
*/
type: {
type: StringConstructor;
validator(value: string | boolean): boolean;
default: string;
};
/**
* 字段名称 对应列内容的字段名
*
* @type {String}
*/
prop: {
type: StringConstructor;
};
/**
* column 的 key
*
* @type {String}
*/
label: {
type: StringConstructor;
};
/**
* 对应列的宽度
*
* @type {String | Number}
*/
width: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
/**
* 对应列的最小宽度
*
* @type {String | Number}
*/
minWidth: {
type: (NumberConstructor | StringConstructor)[];
default: string;
};
/**
* 对应列是否可以排序
*
* @type {Boolean | String}
*/
sortable: {
type: (BooleanConstructor | StringConstructor)[];
validator(value: string | boolean): boolean;
default: boolean;
};
/**
* 字段名称 对应列内容的字段名
*
* @type {String}
*/
property: {
type: StringConstructor;
};
/**
* 对齐方式
*
* left / center / right
*
* @type {String}
*/
align: {
type: StringConstructor;
validator(value: string | boolean): boolean;
default: string;
};
/**
* 表头对齐方式
*
* left / center / right
*
* @type {String}
*/
headerAlign: {
type: StringConstructor;
validator(value: string | boolean): boolean;
default: string;
};
/**
* 当内容过长被隐藏时显示 tooltip
*
* @type {Boolean}
*/
showOverflowTooltip: {
type: BooleanConstructor;
default: boolean;
};
/**
* 数据过滤的选项
* 数组格式，数组中的元素需要有 text 和 value 属性
* 数组中的每个元素都需要有 text 和 value 属性。
*
* @type {Array}
*/
filters: {
type: PropType<Filters>;
};
/**
* 数据过滤使用的方法
* 如果是多选的筛选项
* 对每一条数据会执行多次
* 任意一次返回 true 就会显示。
*
* @type {Function}
*/
filterMethod: {
type: PropType<FilterMethods>;
};
/**
* 过滤弹出框的定位
*
* @type {String}
*/
filterPlacement: {
type: StringConstructor;
default: string;
};
/**
* 如果设置了 type=index，可以通过传递 index 属性来自定义索引
*
* @type {Number, Function}
*/
index: {
type: PropType<number | ((index: number) => number)>;
};
/**
* 列标题 Label 区域渲染使用的 Function
*
* @type {Function}
*/
renderHeader: {
type: PropType<(data: SlotsContent) => VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>>;
};
/**
* 用来格式化内容
*
* @type {Function}
*/
formatter: {
type: PropType<(row: Record<string, any>, column: TableColumnCtx, cellValue: any, index: number) => string | VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>>;
};
/**
* 列的 className
*
* @type {String}
*/
className: {
type: StringConstructor;
};
/**
* 列是否固定在左侧或者右侧。
*
* @type {Boolean | String}
*/
fixed: {
type: (BooleanConstructor | StringConstructor)[];
validator(value: string | boolean): boolean;
};
/**
* 当前列标题的自定义类名
*
* @type {String}
*/
labelClassName: {
type: StringConstructor;
};
/**
* 对应列是否可以通过拖动改变宽度（需要在设置 border 属性为真）
*
* @type {Boolean}
*/
resizable: {
type: BooleanConstructor;
default: boolean;
};
/**
* 仅对 type=selection 的列有效，
* 类型为 Function，
* Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
*
* @type {Function}
*/
selectable: {
type: PropType<(row: any, index: string | number) => boolean>;
};
/**
* 保存数据更新前选中的值
*
* @type {Boolean}
*/
reserveSelection: {
type: BooleanConstructor;
default: boolean;
};
/**
* 数据在排序时所使用排序策略的轮转顺序
*
* @type {Array}
*/
sortOrders: {
type: PropType<("descending" | "ascending")[]>;
default: () => string[];
};
/**
* 没有指定数据按照哪个属性进行排序
*
* @type {String, Function, Array}
*/
sortBy: {
type: PropType<string | string[] | ((row: any, index: number) => string)>;
};
/**
* 自定义排序方法
*
* @type {Function}
*/
sortMethod: {
type: PropType<(a: any, b: any) => number>;
};
/**
* column 的 key， column 的 key
* 如果需要使用 filter-change 事件
* 则需要此属性标识是哪个 column 的筛选条件
*
* @type {String}
*/
columnKey: {
type: StringConstructor;
};
/**
* 数据过滤的选项是否多选
*
* @type {Boolean}
*/
filterMultiple: {
type: BooleanConstructor;
default: boolean;
};
/**
* 选中的数据过滤项
* 如果需要自定义表头过滤的渲染方式
* 可能会需要此属性。
*
* @type {Array}
*/
filteredValue: {
type: PropType<string[]>;
};
};
export default _default;