|
|
@@ -0,0 +1,83 @@
|
|
|
+/**
|
|
|
+ * Created by hujs on 2020/11/11
|
|
|
+ * Desc: GridTableDemo
|
|
|
+ */
|
|
|
+
|
|
|
+import React, { Component } from 'react'
|
|
|
+import { Table } from 'antd'
|
|
|
+
|
|
|
+export default class TableChart extends Component {
|
|
|
+
|
|
|
+ constructor () {
|
|
|
+ super()
|
|
|
+
|
|
|
+ this.state = {}
|
|
|
+ }
|
|
|
+
|
|
|
+ componentDidMount () {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillUnmount () {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ render () {
|
|
|
+ const data = [
|
|
|
+ {
|
|
|
+ key: '1',
|
|
|
+ name: '深爱半导体有限责任公司',
|
|
|
+ rank: 1,
|
|
|
+ money: '500',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '2',
|
|
|
+ name: '华商龙商务有限责任公司',
|
|
|
+ rank: 2,
|
|
|
+ money: '200',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '3',
|
|
|
+ name: '优软科技',
|
|
|
+ rank: 3,
|
|
|
+ money: '100',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: '排名',
|
|
|
+ dataIndex: 'rank',
|
|
|
+ key: 'rank',
|
|
|
+ align: 'center',
|
|
|
+ width: 80,
|
|
|
+ render: text => <a>{text}</a>,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '客户名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ ellipsis: true,
|
|
|
+ key: 'name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '销售额（万元）',
|
|
|
+ dataIndex: 'money',
|
|
|
+ key: 'money',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ const title = '客户销售金额排行榜'
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className='table-charts' style={{ width: '100%' }}>
|
|
|
+ <Table
|
|
|
+ title={() => title}
|
|
|
+ pagination={false}
|
|
|
+ bordered={true}
|
|
|
+ columns={columns}
|
|
|
+ dataSource={data}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
samhoo