简体中文

表单

基础用例
import React, {Component} from 'react';
import {Table, Button} from 'hana-ui';

function getRandomString () {
  return Math.random().toString(36);
}

/**
 * @en
 * Base Example
 *
 *  
 *
 * @cn
 * 基础用例
 *
 *  
 */

export default class ExampleBase extends Component {
  state = {
    data: [
      {one: 11, two: getRandomString(), three: getRandomString()},
      {one: 11, two: getRandomString(), three: getRandomString()},
      {one: 11, two: getRandomString(), three: getRandomString()}
    ]
  }

  render() {
    const actions = (
      <div>
        <Button style={{marginRight: 10}}>
          b
        </Button>
        <Button>
          d
        </Button>
      </div>
    );

    return (
      <div>
        <Table
          tableHeader={['header1', 'header2', 'header3', 'header4']}
          tableData={this.state.data}
          colSequence={['two', {key: 'fifth', defaultValue: 'hahah'}, 'one', actions]}
        />
      </div>
    );
  }
}

 

header1header2header3header4
0.5nn15cioezfhahah11
0.4td66bak9i9hahah11
0.8lospes835ohahah11
自定义列宽
import React, {Component} from 'react';
import {Table} from 'hana-ui';

function getRandomString () {
  return Math.random().toString(36);
}


/**
 * @en
 * Base Example
 *
 * Example of how to custom column's width for each
 *
 * We can use `columnWidth` props to set width of each column.
 *
 * If pass <b>'auto'</b> as columnWidth value it will set column's width as average for each.
 * Or pass an object array to define specific column's width, like:
 *
 * `[{index: 1, column: 2}]`
 *
 * it will make first column take 2 column of the grid.
 *
 * Or pass a column number for each column and pass an object like: `{index: 3, column: 4}` as second argument to define specific column,
 * so the final props value should like: `[2, {index: 3, column: 4}]`
 *
 * @cn
 * 自定义列宽
 *
 * 表单支持使用`columnWidth` 来自定义列宽,传入值如下:
 *
 * `[{index: 1, column: 2}]`, 表示第一列占1/12,第二列占1/6
 *
 * 当然也可传入`auto` 来实现自适应
 */

export default class ExampleColumnWidth extends Component {
  state = {
    data: [
      {
        zero: getRandomString(),
        one: 11,
        two: getRandomString(),
        three: getRandomString()
      },
      {
        zero: getRandomString(),
        one: 11,
        two: getRandomString(),
        three: getRandomString()
      },
      {
        zero: getRandomString(),
        one: 11,
        two: getRandomString(),
        three: getRandomString()
      }
    ]
  }

  render() {
    return (
      <div>
        <Table
          tableHeader={['header0', 'header1', 'header2', 'header3']}
          tableData={this.state.data}
          columnWidth={'auto'}
        />
      </div>
    );
  }
}

表单支持使用columnWidth 来自定义列宽,传入值如下:

[{index: 1, column: 2}], 表示第一列占1/12,第二列占1/6

当然也可传入auto 来实现自适应

header0header1header2header3
0.eyv9s2259um110.0mbpw2f8e4t0.ynzmqyx7mbn
0.t56kufymlke110.pkj88vun7ys0.4bub8nztjz9
0.lxisfbt764e110.jf4arc6gmlj0.wur9gnfgr3h
自定义行操作
import React, {Component} from 'react';
import {Table, Button} from 'hana-ui';
import xor from 'lodash/xor';

function getRandomString() {
  return Math.random().toString(36);
}

/**
 * @en
 * Custom row operation
 *
 * Pass an Array to property selectedRow and handle it's changes by onRowClick property
 *
 * Set `selectable` & `hoverable` props to true can make table support seleted & hover effect for each row
 *
 * `selectedRow` accept a function which will return seleted row's list, each list item include
 * element & its index,also `selectedRow` accept an Array to specific each row's Selected state
 *
 * @cn
 * 自定义行操作
 *
 * `selectable` 和 `hoverable` 可控制表单行是否可被选择及是否开启`hover` 态
 *
 * `selectedRow` 接受一个函数,返回已被选择的行。或者传入一个行数索引为元素的数组来自动设置已选行
 */

export default class ExampleBase extends Component {
  state = {
    data: [
      {one: 11, two: getRandomString(), three: getRandomString()},
      {one: 11, two: getRandomString(), three: getRandomString()},
      {one: 11, two: getRandomString(), three: getRandomString()}
    ],
    selectedRow: []
  };

  handleClick = () => {
    this.setState({
      selectedRow: [1, 2]
    });
  };

  handleRowClick = (event, index) => {
    event.stopPropagation();
    if (Array.isArray(index)) {
      this.setState({
        selectedRow: index.map(Number)
      });
    } else {
      this.setState({
        selectedRow: xor(this.state.selectedRow, [Number(index)])
      });
    }
  };

  handleButtonClick = e => {
    e.preventDefault();
    e.stopPropagation();
  };

  render() {
    const {data, selectedRow} = this.state;
    console.log(selectedRow); // eslint-disable-line
    const actions = (
      <div>
        <Button style={{marginRight: 10}} onClick={this.handleButtonClick}>
          foo
        </Button>
        <Button onClick={this.handleButtonClick}>bar</Button>
      </div>
    );
    return (
      <div>
        <Button onClick={this.handleClick}>setSelectedRow</Button>
        <Table
          showRowIndex
          showCheckbox
          showAllCheckbox
          tableHeader={['header1', 'header2', 'header3', 'header4']}
          tableData={data}
          onRowClick={this.handleRowClick}
          colSequence={[
            () => <a href="//www.bing.com" target="_blank" rel="noopener noreferrer">baidu</a>,
            {key: 'fifth', defaultValue: 'hahah'},
            'one',
            actions
          ]}
          selectable
          hoverable
          selectedRow={selectedRow}
        />
      </div>
    );
  }
}

selectablehoverable 可控制表单行是否可被选择及是否开启hover

selectedRow 接受一个函数,返回已被选择的行。或者传入一个行数索引为元素的数组来自动设置已选行

indexheader1header2header3header4
1baiduhahah11
2baiduhahah11
3baiduhahah11

属性说明

属性名 类型 默认值 说明
tableTitle string 显示表格caption 标签
tableHeader array 自定义表格表头单元格
tableData array 自定义行数据
showRowIndex bool false 显示表格每一行数据的索引
showCheckbox bool false 在表格每一行显示checkbox
showAllCheckbox bool false 在表格表头行显示checkbox,点击全选
colSequence union 自定义表格内容列排序,如果为空将自动遍历tableData 的数据
colAlign enum:
 'left'
 'center'
 'right'
'center' 设置表单行数据的对齐方式,可选配置:'left','center','right'
onRowClick function 自定义表单行点击事件
hoverable bool false 显示行hover 效果
selectable bool false 控制行数据是否可选
selectedRow union 返回所选行数据数组,每一个元素包括dom 及其所在索引值
columnWidth union 自定义特定行的宽度
style object 自定义表格样式
headerStyle object 自定义表格表头样式
bodyStyle object 自定义表格主体样式
children node 设置组件的子组件

未在文档中说明的属性将会被自动加到根元素或form元素上。