merge
This commit is contained in:
izbz wh
commit
d45c4cd966
|
|
@ -34,6 +34,7 @@
|
|||
|
||||
}
|
||||
.opt-btns .u-button{
|
||||
color: #fff;
|
||||
background: #505F79;
|
||||
&:hover, &:active{
|
||||
background: #344563;
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,8 +1,13 @@
|
|||
/**
|
||||
*
|
||||
* @title 基本表格
|
||||
<<<<<<< HEAD
|
||||
* 【Tooltip】
|
||||
* @description 鼠标hover行时呼出操作按钮
|
||||
=======
|
||||
* @parent 基础 Basic
|
||||
* @description 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。
|
||||
>>>>>>> 6d25e1a2d12f9b9603a4aaf6461eedd5387ae0be
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -11,14 +16,15 @@ import Table from "../../src";
|
|||
|
||||
const columns = [
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||
fixed:'left',
|
||||
textAlign:'center',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "60px",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
|
|
@ -28,14 +34,15 @@ const columns = [
|
|||
);
|
||||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo01 extends Component {
|
||||
|
|
|
|||
|
|
@ -11,30 +11,29 @@ import React, { Component } from 'react';
|
|||
import Table from '../../src';
|
||||
import Icon from 'bee-icon';
|
||||
|
||||
|
||||
const columns02 = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
title: "员工编号",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: "40%"
|
||||
},
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
title: "员工姓名",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
dataIndex: "address",
|
||||
key: "address"
|
||||
title: "部门",
|
||||
dataIndex: "department",
|
||||
key: "department"
|
||||
}
|
||||
];
|
||||
];
|
||||
|
||||
const data02 = [];
|
||||
const data02 = [];
|
||||
|
||||
const emptyFunc = () => <Icon type="uf-nodata"></Icon>
|
||||
const emptyFunc = () => <Icon type="uf-nodata"></Icon>
|
||||
|
||||
class Demo02 extends Component {
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 固定表头
|
||||
* @parent 基础 Basic
|
||||
* @description 设置`scroll.y`指定滚动区域的高度，添加纵向滚动条，达到固定表头效果
|
||||
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
|
@ -10,63 +10,167 @@ import Table from '../../src';
|
|||
|
||||
const columns03 = [
|
||||
{
|
||||
title: "Full Name",
|
||||
width: 100,
|
||||
dataIndex: "name",
|
||||
key: "name"
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
|
||||
{ title: "Address", dataIndex: "address", key: "1" }
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "确认状态",
|
||||
dataIndex: "confirmState_name",
|
||||
key: "confirmState_name",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "关闭状态",
|
||||
dataIndex: "closeState_name",
|
||||
key: "closeState_name",
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
const data03 = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
address: "New York Park"
|
||||
orderCode:"2343",
|
||||
supplierName: "xxx",
|
||||
type_name: "123",
|
||||
purchasing:'内行',
|
||||
purchasingGroup:"323",
|
||||
voucherDate:"kkkk",
|
||||
approvalState_name:"vvvv",
|
||||
confirmState_name:"aaaa",
|
||||
closeState_name:"vnnnnn",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
type_name: "1223",
|
||||
purchasing:'内行2',
|
||||
purchasingGroup:"3223",
|
||||
voucherDate:"222kk",
|
||||
approvalState_name:"22vvvv",
|
||||
confirmState_name:"2aaaa",
|
||||
closeState_name:"2vnnnnn",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
type_name: "1223",
|
||||
purchasing:'内行2',
|
||||
purchasingGroup:"3223",
|
||||
voucherDate:"222kk",
|
||||
approvalState_name:"22vvvv",
|
||||
confirmState_name:"2aaaa",
|
||||
closeState_name:"2vnnnnn",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
},{
|
||||
key: "11",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
address: "New York Park"
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
type_name: "1223",
|
||||
purchasing:'内行2',
|
||||
purchasingGroup:"3223",
|
||||
voucherDate:"222kk",
|
||||
approvalState_name:"22vvvv",
|
||||
confirmState_name:"2aaaa",
|
||||
closeState_name:"2vnnnnn",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
key: "12",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
type_name: "1223",
|
||||
purchasing:'内行2',
|
||||
purchasingGroup:"3223",
|
||||
voucherDate:"222kk",
|
||||
approvalState_name:"22vvvv",
|
||||
confirmState_name:"2aaaa",
|
||||
closeState_name:"2vnnnnn",
|
||||
key: "5"
|
||||
},
|
||||
{
|
||||
key: "13",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
type_name: "1223",
|
||||
purchasing:'内行2',
|
||||
purchasingGroup:"3223",
|
||||
voucherDate:"222kk",
|
||||
approvalState_name:"22vvvv",
|
||||
confirmState_name:"2aaaa",
|
||||
closeState_name:"2vnnnnn",
|
||||
key: "6"
|
||||
},
|
||||
{
|
||||
key: "14",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
}
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
type_name: "1223",
|
||||
purchasing:'内行2',
|
||||
purchasingGroup:"3223",
|
||||
voucherDate:"222kk",
|
||||
approvalState_name:"22vvvv",
|
||||
confirmState_name:"2aaaa",
|
||||
closeState_name:"2vnnnnn",
|
||||
key: "7"
|
||||
},
|
||||
{
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
type_name: "1223",
|
||||
purchasing:'内行2',
|
||||
purchasingGroup:"3223",
|
||||
voucherDate:"222kk",
|
||||
approvalState_name:"22vvvv",
|
||||
confirmState_name:"2aaaa",
|
||||
closeState_name:"2vnnnnn",
|
||||
key: "8"
|
||||
},
|
||||
];
|
||||
|
||||
class Demo03 extends Component {
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ import Table from '../../src';
|
|||
|
||||
const columns04 = [
|
||||
{
|
||||
title: "Full Name",
|
||||
title: "员工姓名",
|
||||
width: 100,
|
||||
dataIndex: "name",
|
||||
key: "name"
|
||||
},
|
||||
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
|
||||
{ title: "Address", dataIndex: "address", key: "1" }
|
||||
{ title: "年龄", width: 100, dataIndex: "age", key: "age"},
|
||||
{ title: "住址", dataIndex: "address", key: "1" }
|
||||
];
|
||||
|
||||
const data04 = [
|
||||
|
|
@ -73,7 +73,12 @@ const data04 = [
|
|||
|
||||
class Demo04 extends Component {
|
||||
render() {
|
||||
return <Table className="demo04" columns={columns04} data={data04} />;
|
||||
return <Table
|
||||
className="demo04"
|
||||
columns={columns04}
|
||||
data={data04}
|
||||
height={40}
|
||||
headerHeight={40}/>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,32 +8,19 @@
|
|||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button,Popconfirm} from "tinper-bee";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
|
||||
const columns05 = [
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;">
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
}
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",fixed:'left'},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const data05 = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo05 extends Component {
|
||||
|
|
@ -60,8 +47,6 @@ class Demo05 extends Component {
|
|||
<Table
|
||||
columns={columns05}
|
||||
data={data05}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
// loading={this.state.loading}或者是boolean
|
||||
loading={{show:this.state.loading}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/**
|
||||
*
|
||||
* @title 根据内容自动撑开行高
|
||||
* @title 图片在表格中的展示
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 表格行含有图片时的展示
|
||||
* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -15,7 +15,7 @@ const columns = [
|
|||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
render(record, text, index) {
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
|
|
@ -47,38 +47,28 @@ const columns = [
|
|||
title: "首次发现时间",
|
||||
dataIndex: "discoveryTime",
|
||||
key: "discoveryTime",
|
||||
width: 100,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "实际修复时间",
|
||||
dataIndex: "repairTime",
|
||||
key: "repairTime",
|
||||
width: 100,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "图样",
|
||||
dataIndex: "picture",
|
||||
key: "picture",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "申请单号",
|
||||
dataIndex: "billcode",
|
||||
key: "billcode",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "设施名称",
|
||||
dataIndex: "facilityName",
|
||||
key: "facilityName",
|
||||
width: 100,
|
||||
render(text, record, index) {
|
||||
return <img style={{height:'50px'}} src={text} alt="Picture"/>
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ orgDept: "", facilityManageUnit: "", docketnum: 41, num: "1", discoveryTime: "", repairTime: "", picture: "", billcode: "", facilityName:""},
|
||||
{ orgDept: "", facilityManageUnit: "", docketnum: 41, num: "1", discoveryTime: "", repairTime: "", picture: "", billcode: "", facilityName:""},
|
||||
{ orgDept: "", facilityManageUnit: "", docketnum: 41, num: "1", discoveryTime: "", repairTime: "", picture: "", billcode: "", facilityName:""}
|
||||
{ key: "1", orgDept: "组织1", facilityManageUnit: "部门1", docketnum: 41, num: "1", discoveryTime: "2018-10-17", repairTime: "2018-10-30", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg"},
|
||||
{ key: "2", orgDept: "组织2", facilityManageUnit: "部门2", docketnum: 30, num: "2", discoveryTime: "2019-01-15", repairTime: "2019-01-20", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg"},
|
||||
{ key: "3", orgDept: "组织3", facilityManageUnit: "部门3", docketnum: 35, num: "3", discoveryTime: "2019-04-10", repairTime: "2019-04-17", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg"}
|
||||
];
|
||||
|
||||
class Demo105 extends Component {
|
||||
|
|
|
|||
|
|
@ -8,12 +8,15 @@
|
|||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns11 = [
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 200,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
|
|
@ -50,7 +53,6 @@ const columns11 = [
|
|||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 200,
|
||||
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
|
|
@ -72,9 +74,8 @@ const columns11 = [
|
|||
}
|
||||
];
|
||||
|
||||
const data11 = [
|
||||
const data = [
|
||||
{
|
||||
index: 1,
|
||||
orderCode:"2343",
|
||||
supplierName: "xxx",
|
||||
type_name: "123",
|
||||
|
|
@ -87,8 +88,6 @@ const data11 = [
|
|||
key: "1"
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
_checked:true,
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
type_name: "1223",
|
||||
|
|
@ -101,10 +100,8 @@ const data11 = [
|
|||
key: "2"
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
_disabled:true,
|
||||
type_name: "1223",
|
||||
purchasing:'内行2',
|
||||
purchasingGroup:"3223",
|
||||
|
|
@ -115,7 +112,6 @@ const data11 = [
|
|||
key: "3"
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
type_name: "1223",
|
||||
|
|
@ -132,7 +128,7 @@ const data11 = [
|
|||
class Demo11 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table columns={columns11} data={data11} scroll={{x:true}} />
|
||||
<Table columns={columns} data={data} scroll={{x:true}} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 渲染本地数据
|
||||
* @parent 数据操作 Data Opetation
|
||||
* @description
|
||||
* @description 可自定义页头和页脚。
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -11,14 +11,15 @@ import Table from "../../src";
|
|||
|
||||
const columns = [
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||
fixed:'left',
|
||||
textAlign:'center',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "60px",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
|
|
@ -28,16 +29,16 @@ const columns = [
|
|||
);
|
||||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo21 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
|
|
@ -52,6 +53,10 @@ class Demo21 extends Component {
|
|||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
height={40}
|
||||
headerHeight={40}
|
||||
title={currentData => <div>员工信息统计表</div>}
|
||||
footer={currentData => <div>合计: 共{data.length}条数据</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
/**
|
||||
*
|
||||
* @title 渲染远程数据
|
||||
* @parent 数据操作 Data Opetation
|
||||
* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button} from "tinper-bee";
|
||||
import reqwest from 'reqwest';
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
render: name => `${name.first} ${name.last}`,
|
||||
width: '20%',
|
||||
}, {
|
||||
title: 'Gender',
|
||||
dataIndex: 'gender',
|
||||
filters: [
|
||||
{ text: 'Male', value: 'male' },
|
||||
{ text: 'Female', value: 'female' },
|
||||
],
|
||||
width: '20%',
|
||||
}, {
|
||||
title: 'Email',
|
||||
dataIndex: 'email',
|
||||
}];
|
||||
|
||||
class Demo22 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: [],
|
||||
loading: false,
|
||||
}
|
||||
}
|
||||
|
||||
fetch = (params = {}) => {
|
||||
console.log('params:', params);
|
||||
this.setState({ loading: true });
|
||||
reqwest({
|
||||
url: 'https://randomuser.me/api',
|
||||
method: 'get',
|
||||
data: {
|
||||
results: 10,
|
||||
...params,
|
||||
},
|
||||
type: 'json',
|
||||
}).then((data) => {
|
||||
this.setState({
|
||||
loading: false,
|
||||
data: data.results,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="demo22">
|
||||
<Button className="opt-btns" colors="primary" onClick={() => this.fetch()}>点击加载远程数据</Button>
|
||||
<Table
|
||||
columns={columns}
|
||||
data={this.state.data}
|
||||
loading={this.state.loading}
|
||||
scroll={{y:200}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo22;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.demo22{
|
||||
.opt-btns{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -56,22 +56,6 @@ class Demo21 extends Component {
|
|||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
render(text, record, index){
|
||||
return (
|
||||
<div title={text} >
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;" tooltip={text} >
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
]};
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8857,6 +8857,7 @@ ul {
|
|||
right: 15px; }
|
||||
|
||||
.opt-btns .u-button {
|
||||
color: #fff;
|
||||
background: #505F79; }
|
||||
.opt-btns .u-button:hover, .opt-btns .u-button:active {
|
||||
background: #344563; }
|
||||
|
|
@ -8882,6 +8883,9 @@ ul {
|
|||
-ms-flex-pack: center;
|
||||
justify-content: center; }
|
||||
|
||||
.demo22 .opt-btns {
|
||||
margin-bottom: 8px; }
|
||||
|
||||
.demo32 .u-table-thead th {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px; }
|
||||
|
|
|
|||
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
|
|
@ -88,6 +88,7 @@
|
|||
"react": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue