Plus-table NPM

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;