1.3.25 • Published 11 months ago

@moment-design/query-table v1.3.25

Weekly downloads
-
License
MIT
Repository
-
Last release
11 months ago

QueryTable

配置化基础表格业务组件

运行环境

名称版本号
Node.js15+
NPM7+
Vue.js3+
@moment-design/web-vue1+

使用组件

安装依赖

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\; 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\-
selectedType表格选择按钮类型'checkbox' | 'radio' | undefined-
selectedRows表格已选中的数据Array\-
columns表格列配置Array\-
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\-
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;
    };
  };
}
1.3.25

11 months ago

1.3.24

12 months ago

1.3.23

12 months ago

1.3.18

1 year ago

1.3.19

1 year ago

1.3.20

1 year ago

1.3.21

1 year ago

1.3.22

1 year ago

1.3.13

2 years ago

1.3.14

2 years ago

1.3.12

2 years ago

1.3.17

2 years ago

1.3.15

2 years ago

1.3.16

2 years ago

1.3.7

2 years ago

1.3.10

2 years ago

1.3.11

2 years ago

1.3.9

2 years ago

1.3.8

2 years ago

1.2.8

2 years ago

1.3.6

2 years ago

1.3.5

2 years ago

1.3.3

2 years ago

1.3.2

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.2.9

2 years ago

1.2.0

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.1.9

3 years ago

1.2.7

3 years ago

1.1.8

3 years ago

1.0.9

3 years ago

1.2.6

3 years ago

1.1.7

3 years ago

1.0.8

3 years ago

1.2.5

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.2.3

3 years ago

1.1.4

3 years ago

1.2.2

3 years ago

1.1.3

3 years ago

1.2.1

3 years ago

1.1.2

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.1.0

3 years ago