use plus-table

install

cnpm i plus-table --save

use

import React, { memo, useRef } from 'react';
import type { FC } from 'react';
import PlusTable from 'plus-table';
import type { CurrentItem, FilterItem } from './data';
import { Button, Input } from 'antd';

export type ZzteamProps = {};
const Zzteam: FC<ZzteamProps> = memo(() => {
  return (
    <div>
      <PlusTable<FilterItem, CurrentItem>
        request={async (params) => {
          const response = await API.zzTeam.findAll.request(params);
          return {
            data: response?.list || [],
            total: response?.total,
          };
        }}
        filter={{
          labelWidth: 100,
          list: [
            {
              label: '所属区域',
              name: 'oid',
              orgSelect: true,
            },
            {
              label: '机构队伍类型',
              name: 'type',
              dictSelect: 'TEAM_TYPE',
            },
            {
              label: '机构队伍名称',
              name: 'name',
              view: <Input />,
            },
          ],
        }}
        toolBar={{
          batchBtnsRender: (_, data) => {
            return [
              <a onClick={() => console.log(data)}>
                删除
              </a>,
            ];
          },
          list:[
            <Button type="primary">新增</Button>,
          ]
        }}
        table={{
          columns: [
            {
              title: '所属区域',
              dataIndex: 'oid',
              isOrgName: true,
            },
             {
              title: '机构队伍类型',
              dataIndex: 'teamType',
              dictType: 'TEAM_TYPE',
            },
            {
              title: '机构队伍名称',
              dataIndex: 'name',
            },
            {
              title: '队伍人数',
              dataIndex: 'sum',
            },
            {
              title: '是否有效',
              dataIndex: 'status',
              valueEnum: {
                '0': { text: '无效', status: 'error' },
                '1': { text: '有效', status: 'success' },
              },
            },
            {
              title: '操作',
              fixed: 'right',
              width: 140,
              dropOption: {
                menus: [
                  {
                    name: '详情',
                    disabled: true,//^1.4.0 新增参数
                    onClick: (item) => {
                      console.log(item);
                    },
                  },
                  {
                    name: '修改',
                    onClick: (item) => {
                      console.log(item);
                    },
                  },
                ],
              },
            },
          ],
        }}
      />
    </div>
  );
});
export default Zzteam;

更新记录

1.4.3 table.rowSelection selectedRowKeys 和 onChange 可以外部传入同时，batchBtnsRender依旧生效

1.4.2 table.rowSelection传入优先；

1.4.0（2023.02.16） table->columns->dropOption->menus 新增disabled

1.1.1（2022.11.23） DropOptionProps完善menus、popconfirmTitle

1.0.7（2022.11.23） 1.toolBar add isDefaultShowCheckBox

1.0.6（2022.11.02） 1.参数重命名 showNum -> maxShowNum

1.0.5（2022.10.26） 1.去除查询按钮默认icon 2.样式引入说明

1.0.4（2022.10.26） 1.简化传入dictSelect、orgSelect 2.修改分页查询逻辑

1.0.3（2022.10.25） 1.请求分页无数据处理 2.dropOption添加气泡确认框配置 3.table/column/visible->isShow 统一命名

1.0.2（2022.10.21） 1.columns->render 添加form 2.删除@default 默认参数在dict/config.js

1.0.1 (2022.10.20) 1.规范样式