446 lines
12 KiB
TypeScript
446 lines
12 KiB
TypeScript
// Type definitions for iview 3.3.1
|
||
// Project: https://github.com/iview/iview
|
||
// Definitions by: yangdan
|
||
// Definitions: https://github.com/yangdan8/iview.git
|
||
import Vue, { VNode, CreateElement } from "vue";
|
||
|
||
export declare class 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;
|
||
/**
|
||
* 表格最大高度，单位 px，设置后，如果表格内容大于此值，会固定表头
|
||
*/
|
||
'max-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;
|
||
/**
|
||
* 是否开启拖拽调整行顺序，需配合 @on-drag-drop 事件使用
|
||
* @default false
|
||
*/
|
||
"draggable"?: boolean;
|
||
/**
|
||
* 列使用 tooltip 时，配置它的主题，可选值为 dark 或 light
|
||
* @default dark
|
||
*/
|
||
"tooltip-theme"?: string;
|
||
/**
|
||
* 是否强制使用内置的 row-key，开启后可能会影响性能
|
||
* @default false
|
||
*/
|
||
"row-key"?: boolean;
|
||
/**
|
||
* 开启 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-select-all-cancel", 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;
|
||
/**
|
||
* 拖拽排序松开时触发，返回置换的两行数据索引
|
||
* index1
|
||
* index2
|
||
*/
|
||
$emit(eventName: "on-drag-drop", index1: number, index2: number): this;
|
||
/**
|
||
* 导出数据
|
||
*/
|
||
exportCsv(params: TableExportCsvParams): void;
|
||
/**
|
||
* 执行改变大小重绘table
|
||
*/
|
||
handleResize(): void;
|
||
/**
|
||
* 清除高亮项，仅在开启 highlight-row 时可用
|
||
*/
|
||
clearCurrentRow(): void;
|
||
/**
|
||
* slot插槽对象
|
||
*/
|
||
$slots: {
|
||
/**
|
||
* 表头
|
||
*/
|
||
header: VNode[];
|
||
/**
|
||
* 页脚
|
||
*/
|
||
footer: VNode[];
|
||
/**
|
||
* 加载中
|
||
*/
|
||
loading: VNode[];
|
||
};
|
||
}
|
||
|
||
export declare class 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 函数已被废弃。
|
||
* @param h Render函数
|
||
* @param params 对象，包含 row、column 和 index
|
||
*/
|
||
render?: (
|
||
h?: CreateElement,
|
||
params?: TableColumnRenderParams
|
||
) => VNode;
|
||
/**
|
||
* 自定义列头显示内容，传入参数有两个，column 和 index，分别为当前列数据和当前列索引，不支持渲染自定义组件
|
||
* @param h Render函数
|
||
* @param params 对象，包含 row、column 和 index
|
||
*/
|
||
renderHeader?: (
|
||
h?: CreateElement,
|
||
params?: TableColumnRenderHeadParams
|
||
) => VNode;
|
||
/**
|
||
* type 为 index 时可用，自定义序号
|
||
* @param row 当前行数据
|
||
*/
|
||
indexMethod?: (row?: object) => string | number;
|
||
/**
|
||
* 自定义渲染列，使用 slot-scope 写法
|
||
* 声明 slot 后，就可以在 Table 的 slot 中使用 slot-scope
|
||
*/
|
||
slot?: string;
|
||
/**
|
||
* 对应列是否可以排序，如果设置为 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 class 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 class TableColumnRenderParams {
|
||
/**
|
||
* 当前行数据
|
||
*/
|
||
row?: object;
|
||
/**
|
||
* 当前列数据
|
||
*/
|
||
column?: object;
|
||
/**
|
||
* 当前行索引
|
||
*/
|
||
index?: number;
|
||
}
|
||
|
||
export declare class TableColumnRenderHeadParams {
|
||
/**
|
||
* 当前列数据
|
||
*/
|
||
column?: object;
|
||
/**
|
||
* 当前行索引
|
||
*/
|
||
index?: number;
|
||
}
|
||
|
||
export declare class TableExportCsvParams {
|
||
/**
|
||
* 文件名，默认为 table.csv
|
||
*/
|
||
filename?: string;
|
||
/**
|
||
* 是否导出为原始数据，默认为 true
|
||
*/
|
||
original?: boolean;
|
||
/**
|
||
* 不显示表头，默认为 false
|
||
*/
|
||
noHeader?: boolean;
|
||
/**
|
||
* 自定义导出的列数据
|
||
*/
|
||
columns?: any[];
|
||
/**
|
||
* 自定义导出的行数据
|
||
*/
|
||
data?: any[];
|
||
/**
|
||
* 添加此函数后，不会下载，而是返回数据
|
||
*/
|
||
callback?: (data?: string) => void;
|
||
/**
|
||
* 数据分隔符，默认是逗号(,)
|
||
* @default ,
|
||
*/
|
||
separator?: string;
|
||
/**
|
||
* 每项数据是否加引号
|
||
* @default false
|
||
*/
|
||
quoted?: boolean;
|
||
}
|