antd-web-table

Andt Web Table Component

该组件是基于react和antd design的用于展示搜索查询结果的自定义组件 包括以下功能

• 字段搜索组件 SearchList
• 行为扩展组件 SearchActionPanel
• 表格组件 standardTable

导入模板

$ npm install --save antd-web-table

组件使用介绍

使用方法

import { SearchList } from 'antd-web-table';

传参

{
    name: '', // 定参，string类型，模块名称，取自constant中相应模块对应的名称
    searchPanelProps: { // 定参，object类型，传递SearchActionPanel组件所需参数
        searchEntity: [  // 定参，array类型，包含搜索条件项包含的内容
            {
                label: '', // 定参，string类型，搜索条件项label展示
                key: 'departmentId',// 定参，string类型，唯一标识该搜索条件项，以及用于作为搜索关键字传递给后台
                type: 'Select', // 定参，Input/Select/DatePicker/RangePicker中的任一项，用于表示该搜索项的类型
                dataList: [ // 非定参，array类型，若type为Select类型，为必传字段
                    {
                        value: null, // select下拉列表的标识值
                        label: ''， // select下拉列表的展示值
                    }
                ],  
            }
        ],
        formatAndSetSearchParams： function(values){}, // 定参，函数类型，用于format搜索条件的值,接收所有搜索条件的值
    }, 
    actionBtnGroup： [ // 定参，object类型，包含操作按钮所需的内容
        {
            key: '', // 定参，string类型，按钮唯一标识符
            type: 'base', // 定参，string类型，按钮类型，从base/export中选择
            text: ' 新增', // 定参，string类型，按钮显示文字
            show, // 定参，true/false，按钮显示与否
            handleBtnClick: function(){}, // 定参，function函数，用于处理按钮点击事件
        }
    ],
    searchListProps: { // 定参，object类型，传递搜索结果表展示所需参数
        tableData：{ // 定参，表格展示所需数据
            page：1, // -定参，number类型，表示当前页数
            size: 10, // 定参，number类型，表示当前页所含数据条目
            list: [], // 定参，array类型类型，用于展示列表数据
        }, 
        tableColumns: [ // 定参，array类型，表示列表中列内容
            {
                title: '', // 定参，string类型，表示列表
                dataIndex: '', // 定参，string类型，表示列标识符
                align: '', // 非定参，string类型，left/center/right中选择
                render: function(text,record){}, // 非定参，function函数类型，返回值为text该字段当前显示值，record为该条数据
            }
        ], 
        selectedRows: [],// 定参，array类型，表示所选行，
        handleSelectRows: function(rows){},// 定参,function函数，返回值为所选行
        showTitleConfig: true, // 定参，true/false，表示该表列是否可配置
    }, 
    getDataList： function(params){}, // 定参，function函数类型，返回值为搜索条件对象
}

License

MIT