tf-edit-table v0.1.0

该组件基于 Ant Design 的 React 实现，开发和服务于企业级后台产品。

特性

1.提炼表格列编辑，目前支持 input 和 Select 表单类型；

版本

稳定版：v0.0.1

安装

使用 npm 或 yarn 安装

我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

$ npm install tf-edit-table --save

$ yarn add tf-edit-table

何时使用

当表格涉及到内容的新增、删除和修改的时候；

示例及代码演示

import React from 'react';
import TfEditTable from './components';

const dataSource = [
  { userId: 163, name: '张三', age: 27, position: '功能', jobId: 13496 },
  { userId: 165, name: '李四', age: 22, position: '平台', jobId: 18893 },
];

const Page = () => {
  const handleDel = (record) => {
    console.log('删除', record);
  }

  const handleSave = (record) => {
    console.log('保存', record);
  }

  const handleView = (record) => {
    console.log('查看', record);
  }

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 200,
      editable: true,
      formType: 'select',
      formTypeProps: {
        placeholder: '请输入名字',
      },
      formTypeRules: {
        required: true,
        message: '请输入名字'
      }
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      width: 200,
      editable: true,
      formType: 'input',
      formTypeProps: {
        placeholder: '请输入年龄'
      },
      formTypeRules: {
        required: true,
        message: '请输入年龄'
      }
    },
    {
      title: '所在组',
      dataIndex: 'position',
      key: 'position',
      editable: true,
      formType: 'select'
    },
    {
      title: '工号',
      dataIndex: 'jobId',
      key: 'jobId',
      editable: true,
      formType: 'input',
      formTypeProps: {
        placeholder: '请输入工号'
      },
      formTypeRules: {
        required: true,
        message: '请输入工号'
      }
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      actions: [
        { title: '编辑', type: 'edit' },
        { title: '删除', type: 'del', callback: handleDel, delName: 'name' },
        { title: '保存', type: 'save', callback: handleSave },
        { title: '取消', type: 'cancel' },
        { title: '查看', type: 'view', callback: handleView }
      ]
    }
  ];

  const tfEditTableProps = {
    columns,
    dataSource,
    rowKey: 'userId',
    addText: '新增',
    formData: {
      nameLoading: false,
      nameDataSource: [
        { "key": 1001, "label": "丰雨桥" },
        { "key": 1009, "label": "查柳" }
      ],
      positionDataSource: [
        {
          groupKey: '业务组', groupLabel: 'busiTeam', list: [
            { key: '2001', label: '功能' },
            { key: '2002', label: '平台' },
            { key: '2003', label: '项目' },
          ]
        },
      ]
    }
  };

  return (
    <div style={{ padding: 24 }}>
      <TfEditTable {...tfEditTableProps} />
    </div>
  )
}

export default Page;

API

Table

Column

列描述数据对象，是 columns 中的一项，Column 使用相同的 API。

注意： 1.目前编辑表格不支持分页 2.支持类型有 select 和 input