代码拉取完成,页面将自动刷新
一个基于 React + Ant.Design 的增删改查组件。
npm i @codeflex/antd-crud
function App() {
const columns: ColumnsConfig<Account> = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
placeholder:"请输入姓名",
supportSearch:true,
render: (text) => <a>{text}</a>,
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
supportSearch:true,
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
supportSearch:true,
},
{
title: '标签',
key: 'tags',
dataIndex: 'tags',
supportSearch:true,
render: (_, { tags }) => (
<>
{tags.map((tag) => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</>
),
}
];
const data: Account[] = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
const actions:Actions<Account> = {
onCreate:(account)=>{
console.log("onCreate", account);
}
};
return (
<div style={{width:"960px"}}>
<AntdCrud columns={columns}
dataSource={data}
actions={actions}
pageNumber={1}
pageSize={10}
totalRow={2342}/>
</div>
)
}
ColumnConfig
类型说明:
ColumnConfig
继承了 Antd 的 Table 的 Column 的所有配置,参考:https://ant-design.antgroup.com/components/table-cn#column
在此基础上,增加了自己的配置:
FormConfig
ColumnGroup
类型说明:用于在新增、编辑和查看页面,分组显示 form 内容。
export type ColumnGroup = {
key: string,
title: string,
}
FormConfig
类型说明:type FormConfig = {
// 表单类型,默认为 Input,
// 支持:Input、InputNumber、Hidden、Radio、Checkbox、Rate、
// Switch、DatePicker、Select、Slider、Upload
type: string,
//自定义属性,支持 antd 控件的所有属性配置
attrs?: any,
//验证规则,只在编辑页面起作用
rules?: any[],
}
Actions
类型说明:
Actions
是用于定义 AntdCrud 组件的监听方法
Actions
定义的类型如下:
type Actions<T> = {
//获取数据列表
onFetchList?: (currentPage: number
, pageSize: number
, totalPage: number
, searchParams: any
, sortKey: string
, sortType: "asc" | "desc") => void,
//获取数据详情
onFetchDetail?: (row: T) => T,
//删除单条数据
onDelete?: (row: T) => void,
//批量删除数据
onDeleteBatch?: (rows: T[]) => void,
//数据更新
onUpdate?: (row: T) => void,
//数据创建
onCreate?: (row: T) => void,
//初始化搜索框的值
onSearchValueInit?:(key:string) => any
}
需要用户在 Actions
定义以上方法,用于对数据进行操作或查询。
git clone https://gitee.com/antdadmin/antd-crud.git
cd antd-crud
npm install
npm run dev
QQ群:560291578
AntdAdmin 是前端开源框架,其底层技术栈主要以 React + Ant.design 为主。AntdAdmin 开源(或者计划开源)的产品主要如下:
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型