可编辑 Table

包名：@alife/whale-form 负责人：游鹿

API

FormTable

参数 说明 类型 默认值
field 自定义 field (一般用于需要设置初始值的时候设置) Object -
actions 内置行为包括增加行，删除行，复制行等

可选值:
'add', 'addInOrder', 'delete', 'copy'
cols 自定义列 Object -

cols 配置项

继承 Table.Column API 除此之外有一些其他配置：

参数 说明 类型 默认值
dataKey [*常用] 作为参数提交时的name，不能重复 String
fieldProps [*常用] 返回值为对象，该对象的key参考field.init方法的第二个参数options Function(current, index, record) => Object -

fieldProps 配置项

参考Field 组件， init方法的第二个参数options API 有如下方法

参数 说明 类型 默认值
initValue [*常用]组件初始值(组件第一次render的时候才会读取，后面再修改此值无效),类似defaultValue any
trigger [*常用]触发数据变化的事件名称 String
rules [*常用] 校验规则 参数参考 Array/Object
valueName 组件值的属性名称，如 Checkbox 的是 checked，Input是 value String
getValueFromEvent 自定义从onChange事件中获取value的方式，一般不需要设置. 详细用法查看demo 自定义数据获取 Function(value,...args) 参数顺序和组件是完全一致的

FormTable.Submit

继承 Button API

参数 说明 类型 默认值
field 自定义 field (一般用于需要设置初始值的时候设置) Object -
onClick 点击提交后触发

签名:
Function(value: Object, errors: Object, field: class) => void
参数:
value: {Object} 数据
errors: {Object} 错误数据
field: {class} 实例		 Function func.noop
validate 是否校验/需要校验的 name 数组 Boolean/Array -

FormTable.Reset

继承 Button API

参数 说明 类型 默认值
field 自定义 field (在 Form 内不需要设置) Object -
names 自定义重置的字段 Array -
onClick 点击提交后触发

签名:
Function() => void		 Function func.noop
toDefault 返回默认值 Boolean -

DEMO 列表

Hook Usage

表单table的简单用法

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FormTable, { useFormTable } from '@alifd/form-table';
import { Input, Button, Select, Radio, Field } from '@alifd/next';

const TABLE_FIELD_PREFIX = 'table';

const list = [
    {
        value: 'apple',
        label: 'Apple',
        disabled: false
    }, {
        value: 'pear',
        label: 'Pear',
        disabled: true
    }, {
        value: 'orange',
        label: 'Orange'
    }
];

const cols = [
  {
    title: 'Name',
    dataKey: 'username',
    width: 100,
    align: 'left',
    required: true,
    alignHeader: 'center',
    cell: () => <Input />,
    fieldProps: (current, index) => {
      return {
        rules: {
          required: true,
          message: '自定义错误信息',
        }
      }
    }
  },
  {
    title: 'Email',
    dataKey: 'email',
    width: 200,
    cell: () => <Input />,
    fieldProps: (current, index) => {
      return {
        rules: [{
          format: 'email'
        }]
      }
    }
  },
  {
    title: 'Fruit',
    dataKey: 'fruit',
    width: 240,
    required: true,
    cell: () => <Radio.Group dataSource={list} />,
    fieldProps: (current, index) => {
      return {
        rules: [{
          required: true,
        }]
      }
    }
  }
];

function App() {
  const field = Field.useField({
    parseName: true,
  });
  const { reset, submit, loading } = useFormTable(field);
  function print() {
    const values = field.getValues();
    console.log(values, values[TABLE_FIELD_PREFIX]);
  }

  function submitFormTable(values, errors, field) {
    if (!errors) {
      alert(`提交成功${JSON.stringify(values[TABLE_FIELD_PREFIX])}`);
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({success: true});
        }, 1000);
      });
    }
  }
  function callback(result) {
    console.log(result);
  }

  return (
    <div>
      <FormTable
        field={field}
        size="small"
        cols={cols}
        actions={['addInOrder', 'delete', 'copy']}>
      </FormTable>

      <Button onClick={print}>print</Button>
      <Button onClick={() => {
        submit(true, submitFormTable, callback);
      }}>提交(需要校验)</Button>
      <Button onClick={() => {
        submit(false, submitFormTable);
      }}>提交(不需要校验)</Button>
      <Button onClick={() => {
        reset();
      }}>重置</Button>
      <span>{loading ? 'loading' : 'done'}</span>
    </div>
  );
}

ReactDOM.render((
  <App />
), mountNode);

Simple Usage

表单table的简单用法

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FormTable from '@alifd/form-table';
import { Input, Button, Select, Radio, Field } from '@alifd/next';

const TABLE_FIELD_PREFIX = 'table';

const list = [
    {
        value: 'apple',
        label: 'Apple',
        disabled: false
    }, {
        value: 'pear',
        label: 'Pear',
        disabled: true
    }, {
        value: 'orange',
        label: 'Orange'
    }
];

const cols = [
  {
    title: 'Name',
    dataKey: 'username',
    width: 100,
    required: true,
    align: 'left',
    alignHeader: 'center',
    cell: () => <Input />,
    fieldProps: (current, index) => {
      return {
        rules: {
          required: true,
          message: '自定义错误信息',
        }
      }
    }
  },
  {
    title: 'Email',
    dataKey: 'email',
    width: 200,
    cell: () => <Input />,
    fieldProps: (current, index) => {
      return {
        rules: [{
          format: 'email'
        }]
      }
    }
  },
  {
    title: 'Fruit',
    dataKey: 'fruit',
    width: 240,
    required: true,
    cell: () => <Radio.Group dataSource={list} />,
    fieldProps: (current, index) => {
      return {
        rules: [{
          required: true,
        }]
      }
    }
  }
];

class App extends Component {
  constructor(props) {
    super(props);

    this.field = new Field(this, {
      parseName: true,
    });
  }

  print = () => {
    const values = this.field.getValues();

    console.log(values, values[TABLE_FIELD_PREFIX]);
  }

  submit = (values, errors, field) => {
    if (!errors) {
      alert(`提交成功${JSON.stringify(values[TABLE_FIELD_PREFIX])}`);
    }
  }

  render() {
    return (
      <div>
        <FormTable
          field={this.field}
          size="small"
          cols={cols}
          actions={['addInOrder', 'delete', 'copy']}>
        </FormTable>

        <Button onClick={this.print}>print</Button>
        <FormTable.Submit validate field={this.field} onClick={this.submit} >
          提交
        </FormTable.Submit>
        <FormTable.Reset field={this.field} >
          reset
        </FormTable.Reset>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

Default Value

设置默认值

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FormTable from '@alifd/form-table';
import { Input, Button, Select, Field } from '@alifd/next';

const TABLE_FIELD_PREFIX = 'table';

const selectdDataSource = [
    {value: '10001', label: 'Lucy King'},
    {value: 10002, label: 'Lily King'},
    {value: 10003, label: 'Tom Cat', disabled: true},
    {label: 'Special Group', children: [
        {value: -1, label: 'FALSE'},
        {value: 0, label: 'ZERO'}
    ]}
];

const selectdDataSource2 = [
    {value: 'adf', label: 'Lucy King'},
    {value: 222, label: 'Lily King'},
    {value: 211, label: 'Tom Cat', disabled: true},
];

const cols = [
  {
    title: 'Name',
    dataKey: 'name',
    width: 120,
    required: true,
    cell: () => <Select showSearch dataSource={selectdDataSource2} style={{width: 100}} tagInline/>,
    fieldProps: (current, index, record) => {
      return {
        rules: {
          required: true,
          message: '自定义错误提示',
        }
      }
    }
  },
  {
    title: 'Employee',
    dataKey: 'employee',
    width: 320,
    cell: () => <Select mode="multiple" showSearch dataSource={selectdDataSource} style={{width: 300}} tagInline/>,
    fieldProps: (current, index, record) => {
      return {
        rules: [
          {
            validator: (rule, value, callback) => {
              console.log('value', value)
              if (Array.isArray(value) && value.length > 2) {
                callback('选的太多啦');
              } else {
                callback();
              }
            }
          }
        ]
      }
    }
  },
  {
    title: 'Email',
    dataKey: 'email',
    width: 200,
    cell: () => <Input />,
    required: true,
    fieldProps: (current, index) => {
      return {
        rules: [{
          format: 'email',
          required: true,
        }]
      }
    }
  },
  {
    title: 'Note',
    dataKey: 'note',
    width: 200,
    cell: () => <Input />,
  }
];

class App extends Component {
  constructor(props) {
    super(props);

    this.field = new Field(this, {
      parseName: true,
      // 设置默认值
      values: {
        table: [
          {email: 'service@fusion.com', employee: 10002},
          {name: 222}
        ]
      }
    });
    this.state = {
      selectDS: selectdDataSource
    }
  }

  print = () => {
    const values = this.field.getValues();

    console.log(values, values[TABLE_FIELD_PREFIX]);
  }

  submit = (values, errors, field) => {
    if (!errors) {
      alert(`提交成功${JSON.stringify(values[TABLE_FIELD_PREFIX])}`);
    }
  }

  render() {
    return (
      <div>
        <FormTable
          field={this.field}
          size="small"
          cols={cols}
          actions={['add', 'addInOrder', 'delete', 'copy']}>
        </FormTable>

        <Button onClick={this.print}>print</Button>
        <FormTable.Submit validate field={this.field} onClick={this.submit} >
          提交
        </FormTable.Submit>
        <FormTable.Reset field={this.field}>
          reset
        </FormTable.Reset>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

Linkage

表单联动用法

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FormTable from '@alifd/form-table';
import { Input, Button, Select, Field } from '@alifd/next';

const TABLE_FIELD_PREFIX = 'table';
const selectdDataSource = [
    {value: '10001', label: 'Lucy King'},
    {value: 10002, label: 'Lily King'},
    {value: 10003, label: 'Tom Cat', disabled: true},
    {label: 'Special Group', children: [
        {value: -1, label: 'FALSE'},
        {value: 0, label: 'ZERO'}
    ]}
];

const selectdDataSource2 = [
    {value: 'adf', label: 'Lucy King'},
    {value: 222, label: 'Lily King'},
    {value: 211, label: 'Tom Cat', disabled: true},
];

class App extends Component {
  constructor(props) {
    super(props);

    this.field = new Field(this, {
      parseName: true,
      // 设置默认值
      values: {
        table: [
          {name: 'abc', uuid: 10002},
          {name: 'qqq'}
        ]
      }
    });
    this.state = {
      selectDS: selectdDataSource
    }

    this.cols = [
  {
    title: 'UUID',
    dataKey: 'uuid',
    required: true,
    cell: () => <Select showSearch dataSource={selectdDataSource} style={{width: 100}} tagInline/>,
    fieldProps: (current, index, record) => {
      return {
        rules: [{
          required: true
          },{
            validator: (rule, value, callback) => {
              console.log('value', value)
              if (Array.isArray(value) && value.length >3) {
                callback('选的太多了');
                console.log('value??', value)
              } else {
                callback();
              }
            }
          }
        ],
        props: {
          onChange: (value) => {
            const ds = selectdDataSource2;
            if (value === '10001') {
              this.setState({
                selectDS: ds
              });
              this.field.setValue(`${TABLE_FIELD_PREFIX}.${index}.uuid2`, null);
              console.log('index', index, this.field.getValue(`${TABLE_FIELD_PREFIX}.${index}.uuid2`))
            } else {
              this.setState({
                selectDS: selectdDataSource
              });
            }
          }
        }
      }
    }
  },
  {
    title: 'UUID2',
    dataKey: 'uuid2',
    width: 300,
    required: true,
    cell: () => <Select mode="multiple" showSearch dataSource={this.state.selectDS} style={{width: 270}} tagInline/>,
    fieldProps: (current, index, record) => {
      return {
        rules: {
          required: true,
          message: '不能为空',
        }
      }
    }
  },
  {
    title: 'Name',
    dataKey: 'name',
    cell: () => <Input />,
    required: true,
    fieldProps: (current, index, record) => {
      return {
        rules: {
          required: true,
        }
      }
    }
  }
];
  }

  print = () => {
    console.log(this.field.getValues());
  }

  render() {
    return (
      <div>
        <FormTable
          field={this.field}
          size="small"
          cols={this.cols}
          actions={['add', 'addInOrder', 'delete', 'copy']}>
        </FormTable>

        <Button onClick={this.print}>print</Button>
        <FormTable.Submit validate field={this.field} >
          提交
        </FormTable.Submit>
        <FormTable.Reset field={this.field} >
          reset
        </FormTable.Reset>
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);