419 lines
10 KiB
TypeScript
419 lines
10 KiB
TypeScript
// Type definitions for iview 3.1.0
|
||
// Project: https://github.com/iview/iview
|
||
// Definitions by: yangdan
|
||
// Definitions: https://github.com/yangdan8/iview.git
|
||
import Vue, { VNode } from 'vue';
|
||
|
||
export declare interface Table extends Vue {
|
||
/**
|
||
* 显示的结构化数据，其中，字段 cellClassName 用于设置任意单元格的样式名称，
|
||
* 因此数据不能使用该字段，详见示例特定样式。
|
||
* @default []
|
||
*/
|
||
data?: object[];
|
||
/**
|
||
* 表格列的配置描述，具体项见后文
|
||
* @default []
|
||
*/
|
||
columns?: object[];
|
||
/**
|
||
* 是否显示间隔斑马纹
|
||
* @default false
|
||
*/
|
||
stripe?: boolean;
|
||
/**
|
||
* 是否显示纵向边框
|
||
* @default false
|
||
*/
|
||
border?: boolean;
|
||
/**
|
||
* 是否显示表头
|
||
* @default true
|
||
*/
|
||
'show-header'?: boolean;
|
||
/**
|
||
* 表格宽度，单位 px
|
||
* @default 自动
|
||
*/
|
||
width?: number | string;
|
||
/**
|
||
* 表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头
|
||
*/
|
||
height?: number | string;
|
||
/**
|
||
* 表格是否加载中
|
||
* @default false
|
||
*/
|
||
loading?: boolean;
|
||
/**
|
||
* 禁用鼠标悬停时的高亮
|
||
* @default false
|
||
*/
|
||
'disabled-hover'?: boolean;
|
||
/**
|
||
* 是否支持高亮选中的行，即单选
|
||
* @default false
|
||
*/
|
||
'highlight-row'?: boolean;
|
||
/**
|
||
* 行的 className 的回调方法，传入参数：
|
||
* row：当前行数据
|
||
* index：当前行的索引
|
||
*/
|
||
'row-class-name'?: (row?: object, index?: number) => void;
|
||
/**
|
||
* 表格尺寸，可选值为 large、small、default 或者不填
|
||
*/
|
||
size?: string;
|
||
/**
|
||
* 数据为空时显示的提示内容
|
||
* @default 暂无数据
|
||
*/
|
||
'no-data-text'?: string;
|
||
/**
|
||
* 筛选数据为空时显示的提示内容
|
||
* @default 暂无筛选结果
|
||
*/
|
||
'no-filtered-data-text'?: string;
|
||
/**
|
||
* 开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发
|
||
* currentRow：当前高亮行的数据
|
||
* oldCurrentRow：上一次高亮的数据
|
||
*/
|
||
$emit(eventName: 'on-current-change', currentRow: object, oldCurrentRow: object): this;
|
||
/**
|
||
* 在多选模式下有效，选中某一项时触发
|
||
* selection：已选项数据
|
||
* row：刚选择的项数据
|
||
*/
|
||
$emit(eventName: 'on-select', selection: object[], row: object): this;
|
||
/**
|
||
* 在多选模式下有效，取消选中某一项时触发
|
||
* selection：已选项数据
|
||
* row：取消选择的项数据
|
||
*/
|
||
$emit(eventName: 'on-select-cancel', selection: object[], row: object): this;
|
||
/**
|
||
* 在多选模式下有效，点击全选时触发
|
||
* selection：已选项数据
|
||
*/
|
||
$emit(eventName: 'on-select-all', selection: object[]): this;
|
||
/**
|
||
* 在多选模式下有效，只要选中项发生变化时就会触发
|
||
* selection：已选项数据
|
||
*/
|
||
$emit(eventName: 'on-selection-change', selection: object[]): this;
|
||
/**
|
||
* 排序时有效，当点击排序时触发
|
||
* column：当前列数据
|
||
* key：排序依据的指标
|
||
* order：排序的顺序，值为 asc 或 desc
|
||
*/
|
||
$emit(eventName: 'on-sort-change', column?: object, key?: string, order?: 'asc' | 'desc'): this;
|
||
/**
|
||
* 筛选时有效，筛选条件发生变化时触发 当前列数据
|
||
*/
|
||
$emit(eventName: 'on-filter-change', value: any): this;
|
||
/**
|
||
* 单击某一行时触发
|
||
* currentRow：当前行的数据
|
||
* index?: 当前行的索引
|
||
*/
|
||
$emit(eventName: 'on-row-click', currentRow: object, index: number): this;
|
||
/**
|
||
* 双击某一行时触发
|
||
* currentRow：当前行的数据
|
||
* index?: 当前行的索引
|
||
*/
|
||
$emit(eventName: 'on-row-dblclick', currentRow: object, index: number): this;
|
||
/**
|
||
* 展开或收起某一行时触发
|
||
* row：当前行的数据
|
||
* status：当前的状态
|
||
*/
|
||
$emit(eventName: 'on-expand', row: object, status: string): this;
|
||
/**
|
||
* 导出数据
|
||
*/
|
||
exportCsv(params: TableExportCsvParams): void;
|
||
/**
|
||
* 执行改变大小重绘table
|
||
*/
|
||
handleResize(): void;
|
||
/**
|
||
* 清除高亮项，仅在开启 highlight-row 时可用
|
||
*/
|
||
clearCurrentRow(): void;
|
||
/**
|
||
* slot插槽对象
|
||
*/
|
||
$slots: {
|
||
/**
|
||
* 表头
|
||
*/
|
||
header: VNode[];
|
||
/**
|
||
* 页脚
|
||
*/
|
||
footer: VNode[];
|
||
/**
|
||
* 加载中
|
||
*/
|
||
loading: VNode[];
|
||
};
|
||
}
|
||
|
||
export declare interface TableColumn {
|
||
/**
|
||
* 列类型，可选值为 index、selection、expand、html
|
||
*/
|
||
type?: 'index' | 'selection' | 'expand' | 'html';
|
||
/**
|
||
* 列头显示文字
|
||
* @default #
|
||
*/
|
||
title?: string;
|
||
/**
|
||
* 对应列内容的字段名
|
||
*/
|
||
key?: string;
|
||
/**
|
||
* 列宽
|
||
*/
|
||
width?: number;
|
||
/**
|
||
* 最小列宽
|
||
*/
|
||
minWidth?: number;
|
||
/**
|
||
* 最大列宽
|
||
*/
|
||
maxWidth?: number;
|
||
/**
|
||
* 对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐,默认 left
|
||
* @default left
|
||
*/
|
||
align?: 'left' | 'right' | 'center';
|
||
/**
|
||
* 列的样式名称
|
||
*/
|
||
className?: string;
|
||
/**
|
||
* 列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧
|
||
*/
|
||
fixed?: 'left' | 'right';
|
||
/**
|
||
* 开启后，文本将不换行，超出部分显示为省略号
|
||
* @default false
|
||
*/
|
||
ellipsis?: boolean;
|
||
/**
|
||
* 开启后，文本将不换行，超出部分显示为省略号，并用 Tooltip 组件显示完整内容
|
||
* @default false
|
||
*/
|
||
tooltip?: boolean;
|
||
/**
|
||
* 自定义渲染列，使用 Vue 的 Render 函数。
|
||
* 传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，
|
||
* 分别指当前行数据，当前列数据，当前行索引，详见示例。
|
||
* 学习 Render 函数的内容 从 rc.18 版本开始，我们将不再支持旧的用法。旧的 render 函数已被废弃。
|
||
*/
|
||
render?: (h?:
|
||
(
|
||
el?: string | object | Function,
|
||
data?: string | TableRenderCreateElementData | TableRenderCreateElementResult | Array<TableRenderCreateElementResult>,
|
||
vnode?: string | TableRenderCreateElementResult[]
|
||
) => TableRenderCreateElementResult,
|
||
params?: TableColumnRenderParams
|
||
) => TableRenderCreateElementResult;
|
||
/**
|
||
* 自定义列头显示内容，传入参数有两个，column 和 index，分别为当前列数据和当前列索引，不支持渲染自定义组件
|
||
*/
|
||
renderHeader?: (h?:
|
||
(
|
||
el?: string | object | Function,
|
||
data?: string | TableRenderCreateElementData | TableRenderCreateElementResult | Array<TableRenderCreateElementResult>,
|
||
vnode?: string | TableRenderCreateElementResult[]
|
||
) => TableRenderCreateElementResult,
|
||
params?: TableColumnRenderHeadParams
|
||
) => TableRenderCreateElementResult;
|
||
/**
|
||
* 对应列是否可以排序，如果设置为 custom，则代表用户希望远程排序，
|
||
* 需要监听 Table 的 on- sort - change 事件,默认false
|
||
* @default false
|
||
*/
|
||
sortable?: boolean | 'custom';
|
||
/**
|
||
* 自定义排序使用的方法，接收三个参数 a 、 b 和 type，
|
||
* 当设置 sortable?: true 时有效。type 值为 asc 和 desc
|
||
*/
|
||
sortMethod?: (a: any, b: any, type: 'asc' | 'desc') => void;
|
||
/**
|
||
* 设置初始化排序。值为 asc 和 desc
|
||
*/
|
||
sortType?: 'asc' | 'desc';
|
||
/**
|
||
* 过滤数据的选项，格式为数组，数组中每项包含 label 和 value 属性，使用过滤，必须同时配置filterMethod
|
||
*/
|
||
filters?: { label: string, value: string | number | boolean }[];
|
||
/**
|
||
* 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示
|
||
*/
|
||
filterMethod?: () => void;
|
||
/**
|
||
* 数据过滤的选项是否多选
|
||
* @default true
|
||
*/
|
||
filterMultiple?: boolean;
|
||
/**
|
||
* 在初始化时使用过滤，数组，值为需要过滤的 value 集合
|
||
*/
|
||
filteredValue?: (string | number | boolean)[];
|
||
/**
|
||
* 使用远程过滤
|
||
*/
|
||
filterRemote?: () => void;
|
||
/**
|
||
* 表头分组
|
||
*/
|
||
children?: object[];
|
||
}
|
||
|
||
export declare interface TableRenderCreateElementData {
|
||
/**
|
||
* 和`v-bind:class`一样的 API
|
||
*/
|
||
'class'?: object;
|
||
/**
|
||
* 和`v-bind:style`一样的 API
|
||
*/
|
||
style?: object;
|
||
/**
|
||
* 正常的 HTML 特性
|
||
*/
|
||
attrs?: object,
|
||
/**
|
||
* 组件 props
|
||
*/
|
||
props?: object;
|
||
/**
|
||
* DOM 属性
|
||
*/
|
||
domProps?: object;
|
||
/**
|
||
* 事件监听器基于 "on"
|
||
* 所以不再支持如 v-on?:keyup.enter 修饰器
|
||
* 需要手动匹配 keyCode。
|
||
*/
|
||
on?: object;
|
||
/**
|
||
* 仅对于组件，用于监听原生事件，而不是组件使用 vm.$emit 触发的事件。
|
||
*/
|
||
nativeOn?: object;
|
||
/**
|
||
* 自定义指令. 注意事项：不能对绑定的旧值设值
|
||
* Vue 会为您持续追踨
|
||
*/
|
||
directives?: object[];
|
||
/**
|
||
* 如果子组件有定义 slot 的名称
|
||
*/
|
||
slot?: string;
|
||
/**
|
||
* 其他特殊顶层属性,myKey
|
||
*/
|
||
key?: string;
|
||
/**
|
||
* myRef
|
||
*/
|
||
ref?: string
|
||
}
|
||
|
||
export declare interface TableColumnRenderParams {
|
||
/**
|
||
* 当前行数据
|
||
*/
|
||
row?: object;
|
||
/**
|
||
* 当前列数据
|
||
*/
|
||
column?: object;
|
||
/**
|
||
* 当前行索引
|
||
*/
|
||
index?: number;
|
||
}
|
||
|
||
export declare interface TableRenderCreateElementResult {
|
||
child?: object;
|
||
children?: Array<any>;
|
||
componentInstance?: object;
|
||
componentOptions?: object;
|
||
context?: object;
|
||
data?: object;
|
||
elm?: object;
|
||
functionalContext?: object;
|
||
isCloned?: boolean;
|
||
isComment?: boolean;
|
||
isOnce?: boolean;
|
||
isRootInsert?: boolean;
|
||
isStatic?: boolean;
|
||
key?: object;
|
||
ns?: object;
|
||
parent?: object;
|
||
raw?: boolean;
|
||
tag?: string;
|
||
text?: object;
|
||
}
|
||
|
||
export declare interface TableColumnRenderHeadParams {
|
||
/**
|
||
* 当前列数据
|
||
*/
|
||
column?: object;
|
||
/**
|
||
* 当前行索引
|
||
*/
|
||
index?: number;
|
||
}
|
||
|
||
export declare interface TableExportCsvParams {
|
||
/**
|
||
* 文件名，默认为 table.csv
|
||
*/
|
||
filename?: string;
|
||
/**
|
||
* 是否导出为原始数据，默认为 true
|
||
*/
|
||
original?: boolean;
|
||
/**
|
||
* 不显示表头，默认为 false
|
||
*/
|
||
noHeader?: boolean;
|
||
/**
|
||
* 自定义导出的列数据
|
||
*/
|
||
columns?: any[];
|
||
/**
|
||
* 自定义导出的行数据
|
||
*/
|
||
data?: any[];
|
||
/**
|
||
* 添加此函数后，不会下载，而是返回数据
|
||
*/
|
||
callback?: () => void;
|
||
/**
|
||
* 数据分隔符，默认是逗号(,)
|
||
* @default ,
|
||
*/
|
||
separator?: string;
|
||
/**
|
||
* 每项数据是否加引号
|
||
* @default false
|
||
*/
|
||
quoted?: boolean;
|
||
}
|
||
|
||
|
||
|
||
|