react+ProComponents简单实现表格

文章目录

使用ProComponents的原因
一般后台管理系统,大部分页面功能都是列表和表单的形式。

即便使用了组件
、等,依旧需要写大量高度重复性的代码,比如列表页通常会有 筛选栏、操作栏、表格区域、和分页栏 四个部分, 新增/编辑 页通常有N+表单项(eg: 输入框、下拉框、级联框、单选按钮、多选按钮等等)。之前也考虑将高重复性的代码抽离成组件,通过配置参数,来实现相对应的功能。

在组件设计阶段,将组件的灵活性和易用性作为首要目标(当然终极目标肯定是要实现基础功能,不然做组件的意义何在),因此将每一个模块作为单独的组件,最终实现了筛选栏、操作栏、表单项三个组件,后来随着业务需求的增加,也在不断扩展组件的能力,目前相对比较成熟,可以满足基础的列表/表单页面功能。

没有的按钮什么的去antd里面找就ok

看下效果图

代码奉上(无接口版本只是静态页面),接口版本稍后

javascript 复制代码
import { DownOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Switch } from 'antd';
import React, { useState } from 'react';

export type TableListItem = {
  key: number;
  attendanceEnabled: boolean;
  name: string;
  responsible: string;
};

const tableListDataSource: TableListItem[] = [];

const responsible = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];

for (let i = 0; i < 5; i += 1) {
  tableListDataSource.push({
    key: i,
    attendanceEnabled: false,
    name: 'AppName',
    responsible: responsible[Math.floor(Math.random() * responsible.length)],
  });
}

export default function YourComponent() {
  const [dataSource, setDataSource] = useState(tableListDataSource);

  const handleSwitchChange = (key, checked) => {
    console.log(key,checked);
    const newData = [...dataSource];
    const target = newData.find((item) => key === item.key);
    if (target) {
      target.attendanceEnabled = checked;
      setDataSource(newData);
    }
  };

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '部门ID',
      width: 80,
      dataIndex: 'key',
    },
    {
      title: '是否开启考勤',
      width: 120,
      dataIndex: 'attendanceEnabled',
      valueType: 'option',
      render: (_, record) => {
        return (
          <Switch checked={record.attendanceEnabled} onChange={(checked) => handleSwitchChange(record.key, checked)}></Switch>
        );
      },
    },
    {
      title: '名称',
      width: 80,
      dataIndex: 'name',
      render: (_) => <a>{_}</a>,
    },
    {
      title: '部门负责人',
      width: 80,
      dataIndex: 'responsible',
      valueEnum: {
        all: { text: '全部' },
        付小小: { text: '付小小' },
        曲丽丽: { text: '曲丽丽' },
        林东东: { text: '林东东' },
        陈帅帅: { text: '陈帅帅' },
        兼某某: { text: '兼某某' },
      },
    },
    {
      title: '考勤结果推送至群',
      width: 180,
      key: 'option',
      valueType: 'option',
      render: () => [
        <a key="link">推送至</a>,
        <a key="link2">修改负责人</a>,
      ],
    },
  ];

  return (
    <ProTable<TableListItem>
      dataSource={dataSource}
      rowKey="key"
      // 分页设置
      pagination={{
        showQuickJumper: true,
      }}
      columns={columns}
      search={false}
      headerTitle="罚款罚款,全部罚款!"
    />
  );
}
相关推荐
Mintopia10 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
ITKEY_13 分钟前
flutter日期选择国际化支持
开发语言·javascript·flutter
Mintopia13 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub16 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw19 分钟前
hippy的主要原理
前端
子兮曰21 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068822 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾97625 分钟前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口
小桥风满袖25 分钟前
极简三分钟ES6 - 数值的扩展
前端·javascript
北辰alk25 分钟前
React 组件间数据共享全方位指南:从 Props 到状态管理
前端