83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
/**
|
|
*
|
|
* @title 紧凑型、宽松型
|
|
* @parent 扩展行 Expanded Row
|
|
* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。
|
|
* demo1105
|
|
*/
|
|
|
|
import React, { Component } from "react";
|
|
import {Button,Tooltip,Tag} from "tinper-bee";
|
|
import Table from "../../src";
|
|
|
|
const columns = [
|
|
{ title: "订单编号", dataIndex: "orderNum", key: "orderNum", width: 100 },
|
|
{ title: "采购组织", dataIndex: "org", key: "org", width: 200 },
|
|
{ title: "供应商", dataIndex: "supplier", key: "supplier", width: 100 },
|
|
{ title: "订单日期", dataIndex: "orderDate", key: "orderDate", width: 150 },
|
|
{ title: "总数量", dataIndex: "quantity", key: "quantity", width: 100 },
|
|
{ title: "单据状态", dataIndex: "status", key: "status", width: 100,
|
|
render: (text, record, index) => {
|
|
return (
|
|
<Tag colors={text.type}>{text.desc}</Tag>
|
|
);
|
|
}},
|
|
{ title: "提交人", dataIndex: "submitter", key: "submitter", width: 100 },
|
|
{ title: "单位", dataIndex: "unit", key: "unit", width: 100 },
|
|
{ title: "总税价合计", dataIndex: "sum", key: "sum", width: 100 },
|
|
];
|
|
|
|
const data = [
|
|
{
|
|
orderNum: "NU0391025",
|
|
org: "用友网络科技股份有限公司",
|
|
supplier: "xx供应商",
|
|
orderDate: '2018年03月18日',
|
|
quantity: '100.00',
|
|
status: {type:'success' ,desc:'正常'},
|
|
submitter: '小张',
|
|
unit: 'pc',
|
|
sum:'8,487.00',
|
|
key: "1"
|
|
},
|
|
{
|
|
orderNum: "NU0391026",
|
|
org: "用友网络科技股份有限公司",
|
|
supplier: "xx供应商",
|
|
orderDate: '2018年02月05日',
|
|
quantity: '91.00',
|
|
status: {type:'danger' ,desc:'异常'},
|
|
submitter: '小红',
|
|
unit: 'pc',
|
|
sum:'675.00',
|
|
key: "2"
|
|
},
|
|
{
|
|
orderNum: "NU0391027",
|
|
org: "用友网络科技股份有限公司",
|
|
supplier: "xx供应商",
|
|
orderDate: '2018年07月01日',
|
|
quantity: '98.00',
|
|
status: {type:'success' ,desc:'正常'},
|
|
submitter: '小李',
|
|
unit: 'pc',
|
|
sum:'1,531.00',
|
|
key: "3"
|
|
}
|
|
];
|
|
|
|
class Demo1 extends Component {
|
|
render() {
|
|
return (
|
|
<div>
|
|
<h5>紧凑型表格</h5>
|
|
<Table columns={columns} data={data} size="sm" />
|
|
<h5>宽松型表格</h5>
|
|
<Table columns={columns} data={data} size="lg" />
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Demo1;
|