Antd-table-custom NPM

antd-table-custom

使用说明： 是一款基于antd table开发的扩展组件

安装： yarn add antd-table-custom || npm i antd-table-custom

列支持格式

   // renderCom对应的字段：
    RENDERTREE, //下拉树
    RENDERINPUTNUM, //数字输入框
    RENDERRADIO,  //单选组
    RENDERSELECT, // 下拉框
    RENDERSTAEX,  //文本框
    RENDERICON   //图标 目前不支持扩展
    //默认为input输入框

columns

columns中{}列的每一项
isRequire:表示添加、编辑时是否为必填项
isSearch：搜索中是展示在配置toolbar时
hidden：初始化时是否展示当前列
customRender:自定义操作咧渲染函数
renderCom：列会以什么形式渲染
disabled:当前是否为禁用状态
dict：字典、当返回函数与所需的字段不匹配时、如果为数组时则直接成为组件所需数组
api：请求函数
操作列title必须为‘操作’ 或 dataIndex=“options”
MyIcon组件已经集成到源码、目前不支持扩展
isCol:这个属性是唯一的，在你所需展示得名称上加入即可

示例代码如下

let columns: ColumnsType<MenuDataType> = [
        {
            title: '菜单名称',
            dataIndex: 'name',
            width: 200,
            ellipsis: true,
            key: 'name',
            isCol: true,
            isSearch: true,
            isRequire: true
        },
        {
            title: '路由地址',
            dataIndex: 'path',
            key: 'path',
            isSearch: true,
            isRequire: true
        },
        {
            title: '上级菜单',
            dataIndex: 'parentId',
            key: 'parentId',
            hidden: true,
            renderCom: RENDERTREE,
            dict: {
                label: 'title',
                value: 'id'
            },
            api: getMenuTree()
        },
        {
            title: '菜单图标',
            dataIndex: 'source',
            key: 'source',
            isRequire: true,
            renderCom: RENDERICON,
            render: (_: any, record: MenuDataType) => {
                return (<MyIcon type={getStringByLastkey(' ', record.source as string)} ></MyIcon>)
            }
        },
        {
            title: '菜单编号',
            dataIndex: 'code',
            key: 'code',
            isSearch: true,
            isRequire: true,
        },
        {
            title: '菜单类型',
            dataIndex: 'alias',
            key: 'alias',
            isRequire: true,
            dict: [
                {
                    label: '菜单',
                    value: 1
                }, {
                    label: '按钮',
                    value: 2
                }
            ],
            renderCom: RENDERRADIO,
        },
        {
            title: '菜单排序',
            dataIndex: 'sort',
            key: 'sort',
            isRequire: true,
            renderCom: RENDERINPUTNUM,
        },
        {
            title: "类型",
            dataIndex: "type",
            key: 'type',
            renderCom: RENDERSELECT,
            dict: [
                {
                    label: 'web',
                    value: 'web'
                }, {
                    label: 'pda',
                    value: 'pda'
                }, {
                    label: 'pad',
                    value: 'pad'
                }
            ],
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            hidden: true,
            renderCom: RENDERSTAEX
        },
        {
            title: '操作',
            dataIndex: 'options',
            key: 'options',
            fixed: 'right',
            width: 400,
            edit: true,
            look: true,
            del: true,
            customRender: customRender,
        }
    ]

toolsbar

toolsbar:是否展示顶部导航栏
addBtn：增加
delBtn：删除
reload：刷新
seach：搜索
columnsEdit：列编辑
addApi：添加请求函数
editApi：编辑请求函数
delApi：删除请求函数

使用方法

将动态生成表单方法暴露出来啦

import { byTableCloumsCreateFrom } from 'antd-table-custom';

使用方法：

//addClo:columns数据、
{addClo && byTableCloumsCreateFrom(addClo, fromProps)}

fromProps：

 //动态生成表单所需数据
    const [iconValue, setIconvalue] = useState('')
    const [treeData, setTreeData] = useState([])
    const [open, setopen] = useState(false)
    const [form] = Form.useForm();
    let formRef = useRef()
    //传递参数
    const fromProps = { anyProps: { iconValue, setIconvalue, treeData,open, setopen }, form, formRef }