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