QueryTable
配置化基础表格业务组件
运行环境
| 名称 | 版本号 |
|---|---|
| Node.js | 15+ |
| NPM | 7+ |
| Vue.js | 3+ |
| @moment-design/web-vue | 1+ |
使用组件
安装依赖
npm install @moment-design/query-table --save
import "@moment-design/query-table/dist/css/index.css"
使用组件
import QueryTable from "@moment-design/query-table"
import "@moment-design/query-table/dist/css/index.css"
<query-table :config=config @operate="handleOperate" @query-data="queryData"></query-table>
API
Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| operate | 点击操作按钮 | (key: string, rows?: any, index? number) |
| queryData | 自定义查询和搜索功能 | (type?: string | undefined) |
Slots
| 插槽名 | 描述 |
|---|---|
| custom-header | 自定义头部插槽 |
| custom-center | 自定义中间插槽 |
| custom-footer | 自定义底部插槽 |
Props config
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| request | 配置自动请求接口api | (params: any) => AxiosPromise<any> | undefined | - |
| title | 配置表格标题 | string |undefined | - |
| search | 配置搜索 | config.search | - |
| status | 配置状态栏 | config.status | - |
| toolbar | 配置工具栏 | config.toolbar | - |
| table | 配置表格 | config.table | - |
| footer | 配置底部栏 | config.footer | - |
Props config.search
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | 配置搜索的数据 | any | - |
| forms | 配置搜索的表单 | Array<ConfigSearchForms>; others?: any;} | - |
Props ConfigSearchForms
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| type | 配置搜索的类型 | undefined | 'input' | 'select' | 'date' | 'daterange' | 'slot' | 'hidden'; | - |
| field | 配置搜索的字段 | string | - |
| label | 配置搜索的标题 | string | - |
| options | 配置搜索的其他配置 | Array<{ label: string; value: string | number } | - |
Props config.status
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| prop | 配置状态栏表单属性值 | string | - |
| items | 配置状态栏元素 | Array<{ name: string; value: string | number; total: string | number; }> | - |
Props config.toolbar
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| leftOperates | 配置左侧操作元素 | Array<{ name: string; split?: boolean; others?: ConfigToolbarOperates }> | - |
| rightOperates | 配置左侧操作元素 | Array<{ name: string; others?: ConfigToolbarOperates }> | - |
Props ConfigToolbarOperates
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| hidden | 显示隐藏 | boolean | - |
| permission | 权限节点 | string | - |
| [key: string] | 配置 UI 组件库扩展属性 | any | - |
Props config.table
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | 表格数据 | Array<any> | - |
| selectedType | 表格选择按钮类型 | 'checkbox' | 'radio' | undefined | - |
| selectedRows | 表格已选中的数据 | Array<any> | - |
| columns | 表格列配置 | Array<ConfigTableColumns> | - |
| others | 配置 UI 组件库扩展属性 | any | - |
Props ConfigTableColumns
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| type | 配置列类型 | undefined | 'slot'; | - |
| title | 配置列标题 | string | - |
| dataIndex | 配置列属性 | string | - |
| width | 配置列宽度 | number | - |
| align | 配置列对齐方式 | 'left' | 'center' | 'right' | - |
Props config.footer
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| operates | 配置左侧操作元素 | Array<{ name: string; others?: any; }>; | - |
| pagination | 配置右侧分页 | config.footer.pagination | - |
Props config.footer.pagination
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| props | 配置自定义分页参数属性 | { page?: string; size?: string; } | - |
| total | 配置分页总数 | number | - |
| page | 配置默认当前分页 | number | - |
| size | 配置默认页数 | number | - |
| pageSizes | 配置可选择的每页数量 | Array<number> | - |
| others | 配置 UI 组件库扩展属性 | any | - |
类型校验
import { AxiosPromise } from 'axios';
export interface ILTable {
/**
* 配置默认请求接口
*/
request?: (params: any) => AxiosPromise<any>;
/**
* 配置页面标题
*/
title?: string;
/**
* 配置搜索条件
*/
search?: {
/**
* 配置搜索的数据
*/
data: {
status?: string | number;
};
/**
* 配置搜索的表单
*/
forms?: Array<{
/**
* 配置搜索的类型
*/
type?:
| undefined
| 'input'
| 'select'
| 'date'
| 'daterange'
| 'slot'
| 'hidden';
/**
* 配置搜索的字段
*/
field: string;
/**
* 配置搜索的标题
*/
label: string;
/**
* 配置搜索的其他配置
*/
options?: Array<{ label: string; value: string | number }>;
/**
* 配置 UI 组件库扩展属性
*/
others?: any;
}>;
};
/**
* 配置状态栏
*/
status?: {
/**
* 配置状态栏表单值
*/
prop: string;
/**
* 配置状态栏元素
*/
items: Array<{
/**
* 配置状态栏元素名称
*/
name: string;
/**
* 配置状态栏元素值
*/
value: string | number;
/**
* 配置状态栏元素总数
*/
total?: string | number;
}>;
};
/**
* 配置工具栏
*/
toolbar?: {
/**
* 配置左侧操作元素
*/
leftOperates?: Array<{
/**
* 配置操作元素名称
*/
name: string;
/**
* 配置操作元素分割线
*/
split?: boolean;
/**
* 配置 UI 组件库扩展属性
*/
others?: {
/**
* 显示隐藏
*/
hidden?: boolean;
/**
* 权限节点
*/
permission?: string;
[key: string]: any;
};
}>;
/**
* 配置右侧操作元素
*/
rightOperates?: Array<{
/**
* 配置操作元素名称
*/
name: string;
/**
* 配置 UI 组件库扩展属性
*/
others?: {
/**
* 显示隐藏
*/
hidden?: boolean;
/**
* 权限节点
*/
permission?: string;
[key: string]: any;
};
}>;
};
/**
* 配置表格
*/
table: {
data: Array<any>;
selectedType?: 'checkbox' | 'radio' | undefined;
selectedRows?: Array<any>;
columns: Array<{
/**
* 配置列类型
*/
type?: undefined | 'slot';
/**
* 配置列标题
*/
title: string;
/**
* 配置列属性
*/
dataIndex: string;
/**
* 配置列宽度
*/
width?: number;
/**
* 配置列对齐方式
*/
align?: 'left' | 'center' | 'right';
/**
* 配置 UI 组件库扩展属性
*/
others?: {
/**
* 配置是否显示省略号
*/
ellipsis?: boolean;
/**
* 配置是否显示提示信息
*/
tooltip?: boolean;
/**
* 配置扩展属性
*/
[key: string]: any;
};
}>;
/**
* 配置 UI 组件库扩展属性
*/
others?: any;
};
/**
* 配置底部栏
*/
footer?: {
/**
* 配置左侧操作元素
*/
operates?: Array<{
/**
* 配置操作元素名称
*/
name: string;
/**
* 配置 UI 组件库扩展属性
*/
others?: any;
}>;
/**
* 配置右侧分页
*/
pagination: {
/**
* 配置自定义分页参数属性
*/
props?: {
page?: string;
size?: string;
};
/**
* 配置分页总数
*/
total: number;
/**
* 配置默认当前分页
*/
page?: number;
/**
* 配置默认页数
*/
size?: number;
/**
* 配置可选择的每页数量
*/
pageSizes?: Array<number>;
/**
* 配置 UI 组件库扩展属性
*/
others?: any;
};
};
}
