semantic-ui-react使用

• 引入

import { Checkbox, Table, Button, Icon } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

• 下载

npm install semantic-ui-react --save
npm install semantic-ui-css --save

• 必须引入样式文件

import "semantic-ui-css/semantic.min.css";

• Table

1.表格单元格合并

< Table.Cell colSpan ="3">
或者
< Table.Cell colSpan = {3}>

• 复选框的半选中状态

html5给复选框新增了一个半勾选状态的显示效果
但这个indeterminate属性不能直接添加到html上，只能通过js控制

  componentDidMount(){var ele = document.getElementById('siteCheckbox');ele.indeterminate = true;}

• Popup

实现鼠标移动上去，显示浮窗

//引入
import { Popup } from "semantic-ui-react";//使用
<Popuptrigger={<Icon as="i" name="eye" className="view-more-eye" />}position="right center"hoverableflowing
><Popup.Header>123</Popup.Header><Popup.Content>123</Popup.Content>
</Popup>

• table中点击行下拉显示对应的子行

import React, { Component } from "react";
import "semantic-ui-css/semantic.min.css";
import { Grid, Icon, Label, Segment, Table } from "semantic-ui-react";
const tableData = [{ id: "1", value: "test1" },{ id: "2", value: "test2" },{ id: "3", value: "test3" },{ id: "4", value: "test4" },{ id: "5", value: "test5" },{ id: "6", value: "test6" }
]
class App extends Component {constructor(props) {super(props);this.state = {expandedRows: []};}handleRowClick(rowId) {const currentExpandedRows = this.state.expandedRows;const isRowCurrentlyExpanded = currentExpandedRows.includes(rowId);const newExpandedRows = isRowCurrentlyExpanded? currentExpandedRows.filter(id => id !== rowId): currentExpandedRows.concat(rowId);this.setState({ expandedRows: newExpandedRows });}renderItemCaret(rowId) {const currentExpandedRows = this.state.expandedRows;const isRowCurrentlyExpanded = currentExpandedRows.includes(rowId);if (isRowCurrentlyExpanded) {return <Icon name="caret down" />;} else {return <Icon name="caret right" />;}}renderHubItem = (data, i) => {const clickCallback = () => this.handleRowClick(i);let tableRow = [<Table.Rowkey={"list-" + i}onClick={ clickCallback }><Table.Cell>{this.renderItemCaret(i)}{data.id}</Table.Cell></Table.Row>];if (this.state.expandedRows.includes(i)) {tableRow.push(<Table.Row key={"row-expanded-" + i}><Table.Cell colSpan="14">{this.renderItemDetails(data)}</Table.Cell></Table.Row>);}return tableRow;};renderItemDetails = item => {return (<Table style={
   { backgroundColor: "#f9f9f9" }}><Table.Header><Table.Row><Table.Cell>test drowp content</Table.Cell></Table.Row></Table.Header><Table.Body><Table.Row><Table.Cell>{item.id ? item.id : ""}:{item.value ? item.value : ""}</Table.Cell></Table.Row></Table.Body></Table>);};render() {let allItemRows = [];tableData.forEach((item, index) => {console.log("item, index",item, index)const perItemRows = this.renderHubItem(item, index);allItemRows = allItemRows.concat(perItemRows);});console.log("allItemRows",allItemRows)return (<div className="Statistics-container"><Grid><Grid.Row><Grid.Column width={16}><Segment><div className="seg-title"><Label as="a" color="red" ribbon>testList:</Label></div><TablecelledclassName="result-table"><Table.Header><Table.Row><Table.HeaderCell>test</Table.HeaderCell></Table.Row></Table.Header><Table.Body>{allItemRows}</Table.Body></Table></Segment></Grid.Column></Grid.Row></Grid></div>);}
}
export default App;

还可以使用react-table实现该效果：https://blog.csdn.net/qq_37815596/article/details/84620570文章中第19个案例