doc
This commit is contained in:
parent
7f61d2dbdc
commit
70a0e0a460
|
@ -1,47 +1,33 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 简单表格、两种tip、选中行背景色、文字过长
|
* @title 简单表格、文字过长,两种tip
|
||||||
* 【一种是bee-popover实现、一种是标签本身的tooltip】
|
* 【Tooltip】
|
||||||
* @description
|
* @description
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import Popover from 'bee-popover';
|
|
||||||
import Button from "bee-button";
|
import Button from "bee-button";
|
||||||
|
import Tooltip from "bee-tooltip";
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
|
|
||||||
function getTitleTip(text){
|
|
||||||
return(<div>
|
|
||||||
<h3>{text}</h3>
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
|
||||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
|
||||||
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName",
|
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName",
|
||||||
render(text, record, index) {
|
render: (text, record, index)=> {
|
||||||
return(<div style={{position: 'relative'}}>
|
return (
|
||||||
<Popover
|
<Tooltip inverse overlay={text}>
|
||||||
placement="leftTop"
|
<span tootip={text} style={{
|
||||||
content={getTitleTip(text)}
|
display: "inline-block",
|
||||||
trigger="hover"
|
width: "100px",
|
||||||
id="leftTop"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 5,
|
|
||||||
left: 0,
|
|
||||||
width: "80px",
|
|
||||||
textOverflow:"ellipsis",
|
textOverflow:"ellipsis",
|
||||||
overflow:"hidden",
|
overflow:"hidden",
|
||||||
whiteSpace:"nowrap"
|
whiteSpace:"nowrap",
|
||||||
|
verticalAlign: "middle",
|
||||||
}}>{text}</span>
|
}}>{text}</span>
|
||||||
</Popover>
|
</Tooltip>
|
||||||
</div>);
|
);
|
||||||
}},
|
}},
|
||||||
|
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||||
|
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
dataIndex: "d",
|
dataIndex: "d",
|
||||||
|
@ -90,20 +76,11 @@ class Demo1 extends Component {
|
||||||
<Table
|
<Table
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
rowClassName={(record,index,indent)=>{
|
|
||||||
if (this.state.selectedRowIndex == index) {
|
|
||||||
return 'selected';
|
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onRowClick={(record,index,indent)=>{
|
onRowClick={(record,index,indent)=>{
|
||||||
this.setState({
|
this.setState({
|
||||||
selectedRowIndex: index
|
selectedRowIndex: index
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
title={currentData => <div>标题: 这是一个标题</div>}
|
|
||||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,58 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title 简单表格选中行的背景色、表头表尾
|
||||||
|
* @description
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import Button from "bee-button";
|
||||||
|
import Tooltip from "bee-tooltip";
|
||||||
|
import Table from "../../src";
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
|
||||||
|
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||||
|
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||||
|
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||||
|
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||||
|
];
|
||||||
|
|
||||||
|
class Demo26 extends Component {
|
||||||
|
|
||||||
|
constructor(props){
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
data: data,
|
||||||
|
selectedRowIndex: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
data={data}
|
||||||
|
rowClassName={(record,index,indent)=>{
|
||||||
|
if (this.state.selectedRowIndex == index) {
|
||||||
|
return 'selected';
|
||||||
|
} else {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onRowClick={(record,index,indent)=>{
|
||||||
|
this.setState({
|
||||||
|
selectedRowIndex: index
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
title={currentData => <div>标题: 这是一个标题</div>}
|
||||||
|
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Demo26;
|
|
@ -2,8 +2,6 @@
|
||||||
*
|
*
|
||||||
* @title 表格+分页
|
* @title 表格+分页
|
||||||
* @description 点击分页联动表格
|
* @description 点击分页联动表格
|
||||||
*
|
|
||||||
*import {Table} from 'tinper-bee';
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
|
@ -59,11 +57,14 @@ class Demo8 extends Component {
|
||||||
last
|
last
|
||||||
prev
|
prev
|
||||||
next
|
next
|
||||||
boundaryLinks
|
|
||||||
items={2}
|
|
||||||
maxButtons={5}
|
maxButtons={5}
|
||||||
|
boundaryLinks
|
||||||
activePage={this.state.activePage}
|
activePage={this.state.activePage}
|
||||||
onSelect={this.handleSelect.bind(this)}
|
onSelect={this.handleSelect.bind(this)}
|
||||||
|
onDataNumSelect={this.dataNumSelect}
|
||||||
|
showJump={true}
|
||||||
|
total={100}
|
||||||
|
dataNum={2}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue