123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- import React, { Component } from 'react';
- import './index.less';
- import CheckboxItem from '../CheckboxItem';
- import Icon from '../Icon';
- export default class UserTable extends Component {
- onChange() {
- if (this.props.onChange) this.props.onChange();
- }
- onSelect(checked, key) {
- const { selectList = [] } = this.props;
- if (checked) {
- selectList.push(key);
- } else {
- selectList.splice(selectList.indexOf(key), 1);
- }
- if (this.props.onSelect) this.props.onSelect(selectList);
- }
- render() {
- const { columns = [], rowKey = 'key', data = [], select, selectList = [] } = this.props;
- return (
- <div className="user-table">
- <table>
- <thead>
- <tr>
- {select && <th className="select" />}
- {columns.map(item => {
- return <th>{item.title}</th>;
- })}
- </tr>
- </thead>
- <tbody>
- {data.map(row => {
- const checked = selectList.indexOf(row[rowKey]) >= 0;
- return (
- <tr>
- {select && (
- <td className="select">
- <CheckboxItem
- theme="white"
- checked={checked}
- onClick={value => this.onSelect(value, row[rowKey])}
- />
- </td>
- )}
- {columns.map(item => {
- return <td>{item.render ? item.render(row[item.key], row) : row[item.key]}</td>;
- })}
- </tr>
- );
- })}
- </tbody>
- </table>
- {data.length === 0 && <div className="empty">暂无数据</div>}
- {data.length > 0 && (
- <div className="page">
- <Icon name="prev" />
- <span>
- <b>1</b>/10
- </span>
- <Icon name="next" />
- </div>
- )}
- </div>
- );
- }
- }
|