• react下自定义Table


    import React from "react"

    /**

     * EditableTable配置数据的数据类型

     */

    export type EditableTableData = {

        /**

         * 表格id,建议保持唯一性

         */

        id?: string,

        /**

         * 表名,用以缓存配置使用,不设置则不缓存

         */

        name?: string,

        style?: any,

        /**

         * title配置,保留

         */

        title?: any,

        /**

         * Table高度随容器自动改变。

         * 注意:设置dock,所在容器高度必须设置(支持calc)。

         */

        dock?: boolean,

        /**

         * dock==true时,用于调整y高度的偏移量。为保持box-shadow等样式效果,默认预留4-8px

         */

        dockOffset?: number,

        /**

         * .ant-table-body类名,prefixCls不同时设置

         */

        bodyClassName?: string,

        /**

         * 多主题时用于设置antd类名前缀

         */

        prefixCls?: string,

        /**

         * Table.className

         */

        className?: string,

        /**

         * 行类名

         */

        rowClassName?: any,

        bordered?: boolean,

        size?: "small" | "middle" | "large",

        dataSource: any[],

        selectedRowKeys?: any[],

        columns: any[],

        expandable?: any,

        /**

         * 缓存

         */

        cache?: boolean,

        /**

         * 性能控制

         * normal:去除一些不必要的动作

         * extreme:摈除所有不必要的动作

         */

        burst?: "default" | "normal" | "extreme",

        /**

         * 默认有分页,不要分页请设置为false

         */

        pagination?: any,

        /**

         * Table.scroll,在dock==true时,scroll.y不再起效果

         */

        scroll?: any,

        loading: boolean,

        /**

         * 虚拟化组件(flexible组件专用)

         */

        virtual?: any,

        /**

         * 手动设置虚拟列表高度(flexible组件专用)

         */

        virtualHeight?: number,

        height?: number,

        /**

         * 没有数据提示文字

         */

        emptyText?: string,

        /**

         * footer

         */

        footer?: () => React.ReactNode,

        changeColumns?: (cols: any[], index: number) => void,

        resetColumns?: () => void,

        /**

         * 指定key

         */

        rowKey?: any,

        /**

         * 自动组织行拖动排序后的数据

         */

        dragself?: boolean,

        draggerWidth?: number,

        /**

         * 拖动模式:row-行,dragger-拖动图标

         */

        dragType?: "row" | "dragger",

        onRowSelect?: (record: any, selected: boolean, rows: any[]) => void,

        onRowClick?: (record: any) => void,

        onSelectChange?: (selectedRowKeys: any[], updateCallback: (updatedKeys: any[]) => void, selectedRows: any[]) => void,

        /**

         * 回调改变后的所有数据

         */

        click?: (records: any[]) => void,

        /**

         * 行拖动完毕回调

         * @param results 排序完成结果

         * @param target 拖动行

         * @param touch 受理行

         */

        dragment?: (results: any[], target: any, touch: any) => void,

        /**

         * 编辑行保存回调

         */

        onSave?: (record: any) => void,

        /**

         * 使用简易配置(列宽、行排序、行间double、高亮拖动行)

         */

        quickable?: boolean,

        /**

         * 列排序

         */

        columnSortable?: boolean,

        /**

         * 拖拽列宽(设置true,则列排序不可使用)

         */

        columnSizable?: boolean,

        /**

         * 列是否可移除

         */

        columnRemovable?: boolean,

        /**

         * 行排序

         */

        rowSortable?: boolean,

        /**

         * 行只读

         */

        rowReadonly?: boolean,

        /**

         * 行间模式:默认不设置,2行间 | 3行间

         */

        rowSplitMode?: undefined | "default" | "double" | "triple",

        /**

         * 是否高亮拖动排序后的行,只在设置rowSortable=true时有效

         */

        rowLightSorted?: true,

    }

    export type FlexibleTableData = Omit | {components?: any}

  • 相关阅读:
    G 蛋白偶联受体与小分子化合物的相互作用
    【塔望方法论】塔望3W消费战略 - U&A研究法
    【linux命令讲解大全】021.强大的压缩包查看工具:bzless和less的使用详解
    6-9 共享后缀的链表 分数 15
    优维邀您共赴2022GOPS全球运维大会,探索精益IT运维方式
    老版本kafka查询topic消费情况(python查询)
    云服务器上部署仿牛客网项目
    全量知识系统问题及SmartChat给出的答复 之12 知识图表设计
    人工智能自学需要学什么?
    Cisco ACL 中的通配符掩码详解
  • 原文地址:https://blog.csdn.net/xiaowengang/article/details/128130907