npm package: @moment-design/query-table
Description: 配置化基础表格业务组件
Latest version: 1.3.38

# 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)             |
| queryPageData | 自定义查询和搜索指定页数功能 | (page: number)                           |

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;
    };
  };
}
```