index.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import React, { Component } from 'react';
  2. import './index.less';
  3. import CheckboxItem from '../CheckboxItem';
  4. import Icon from '../Icon';
  5. export default class UserTable extends Component {
  6. onChange() {
  7. if (this.props.onChange) this.props.onChange();
  8. }
  9. onSelect(checked, key) {
  10. const { selectList = [] } = this.props;
  11. if (checked) {
  12. selectList.push(key);
  13. } else {
  14. selectList.splice(selectList.indexOf(key), 1);
  15. }
  16. if (this.props.onSelect) this.props.onSelect(selectList);
  17. }
  18. render() {
  19. const { columns = [], rowKey = 'key', data = [], select, selectList = [] } = this.props;
  20. return (
  21. <div className="user-table">
  22. <table>
  23. <thead>
  24. <tr>
  25. {select && <th className="select" />}
  26. {columns.map(item => {
  27. return <th>{item.title}</th>;
  28. })}
  29. </tr>
  30. </thead>
  31. <tbody>
  32. {data.map(row => {
  33. const checked = selectList.indexOf(row[rowKey]) >= 0;
  34. return (
  35. <tr>
  36. {select && (
  37. <td className="select">
  38. <CheckboxItem
  39. theme="white"
  40. checked={checked}
  41. onClick={value => this.onSelect(value, row[rowKey])}
  42. />
  43. </td>
  44. )}
  45. {columns.map(item => {
  46. return <td>{item.render ? item.render(row[item.key], row) : row[item.key]}</td>;
  47. })}
  48. </tr>
  49. );
  50. })}
  51. </tbody>
  52. </table>
  53. {data.length === 0 && <div className="empty">暂无数据</div>}
  54. {data.length > 0 && (
  55. <div className="page">
  56. <Icon name="prev" />
  57. <span>
  58. <b>1</b>/10
  59. </span>
  60. <Icon name="next" />
  61. </div>
  62. )}
  63. </div>
  64. );
  65. }
  66. }