antd 合并列

import React from 'react';
import { connect } from 'react-redux';

import actions from '../../redux/actions';

import moment from 'moment'

import {
  Table,
  Row,
  Col,
  DatePicker,
  Button,
  Select,
  
} from 'antd';


const Option = Select.Option;

const columns = [
  {
    title: '店铺',
    dataIndex: 'dianPu',
    key: 'dianPu',
    width: 80,
  },
  {
    title: '订单数',
    dataIndex: 'dingDanShu',
    key: 'dingDanShu',
    width: 80,
  },
  {
    title: '客流',
    dataIndex: 'keLiu',
    key: 'keLiu',
    width: 80,
  },
  {
    title: '流水',
    dataIndex: 'liuShui',
    key: 'liuShui',
    width: 80,
  },
  {
    title: '待结金额',
    dataIndex: 'daiJieJinE',
    key: 'daiJieJinE',
    width: 80,
  },
  {
    title: '优惠',
    dataIndex: 'youHui',
    key: 'youHui',
    width: 80,
  },
  {
    title: '实收',
    dataIndex: 'shiShou',
    key: 'shiShou',
    width: 80,
  },
  {
    title: '人均',
    dataIndex: 'renJun',
    key: 'renJun',
    width: 80,
  },
  {
    title: '单均',
    dataIndex: 'danJun',
    key: 'danJun',
    width: 80,
  },
  {
    title: '客人构成',
    children: [{
      title: '会员',
      dataIndex: 'huiYuan',
      key: 'huiYuan',
      width: 80,
    }, {
      title: '非会员',
      dataIndex: 'feiHuiYuan',
      key: 'feiHuiYuan',
      width: 80,
    }],
  },
  {
    title: '订单构成',
    children: [{
      title: '食堂',
      dataIndex: 'shiTang',
      key: 'shiTang',
      width: 80,
    }, {
      title: '非食堂',
      dataIndex: 'feiShiTang',
      key: 'feiShiTang',
      width: 80,
    }],
  },
  {
    title: '收款构成',
    children: [{
      title: '人民币',
      dataIndex: 'renMinBi',
      key: 'renMinBi',
      width: 80,
    }]
  },

]
const data = [];
const YcGdDianPuOneData = [];
for (let i = 0; i < 5; i++) {
  YcGdDianPuOneData.push({
    key: i,
    dianPu: '广东店铺1粤',
    dingDanShu: 88,
    keLiu: 108,
    liuShui: 1000.00,
    daiJieJinE: 10.00,
    youHui: 8.00,
    shiShou: 900.00,
    renJun: 100.00,
    danJun: 80.00,
    huiYuan: 20,
    feiHuiYuan: 20,
    shiTang: 5,
    feiShiTang: 6,
    renMinBi: "¥20"
  });
}
for (let i = 0; i < 5; i++) {
  data.push({
    key: i,
    dianPu: '麻辣香锅',
    dingDanShu: 88,
    keLiu: 108,
    liuShui: 1000.00,
    daiJieJinE: 10.00,
    youHui: 8.00,
    shiShou: 900.00,
    renJun: 100.00,
    danJun: 80.00,
    huiYuan: 20,
    feiHuiYuan: 20,
    shiTang: 5,
    feiShiTang: 6,
    renMinBi: "¥20"
  });
}

/*何亮测试数据dataTest*/
const dataTest = [
  {
    "id": "麻辣集团",
    "name": "麻辣集团",
    "data": [
      {
        "id": "广东",
        "name": "广东",
        "data": [
          "广东店铺1辣",
          "广东店铺2辣",
          "广东店铺3辣",
        ]
      },
      {
        "id": "广西",
        "name": "广西",
        "data": [
          "广西店铺1辣",
          "广西店铺2辣",
          "广西店铺3辣",
        ]
      },
      {
        "id": "湖南",
        "name": "湖南",
        "data": [
          "湖南店铺1辣",
          "湖南店铺2辣",
          "湖南店铺3辣",
        ]
      },
    ]
  },
  {
    "id": "粤菜集团",
    "name": "粤菜集团",
    "data": [
      {
        "id": "广东",
        "name": "广东",
        "data": [
          "广东店铺1粤",
          "广东店铺2粤",
          "广东店铺3粤",
        ]
      },
      {
        "id": "广西",
        "name": "广西",
        "data": [
          "广西店铺1粤",
          "广西店铺2粤",
          "广西店铺3粤",
        ]
      },
      {
        "id": "湖南",
        "name": "湖南",
        "data": [
          "湖南店铺1粤",
          "湖南店铺2粤",
          "湖南店铺3粤",
        ]
      },
    ]
  },
  {
    "id": "湘菜集团",
    "name": "湘菜集团",
    "data": [
      {
        "id": "广东",
        "name": "广东",
        "data": [
          "广东店铺1湘",
          "广东店铺2湘",
          "广东店铺3湘",
        ]
      },
      {
        "id": "广西",
        "name": "广西",
        "data": [
          "广西店铺1湘",
          "广西店铺2湘",
          "广西店铺3湘",
        ]
      },
      {
        "id": "湖南",
        "name": "湖南",
        "data": [
          "湖南店铺1湘",
          "湖南店铺2湘",
          "湖南店铺3湘",
        ]
      },
    ]
  }
];

// @connect((state) => state)
export default class YingYeMingXi extends React.Component {
  // static fetchData(store) {
  //   return store.dispatch(actions.getGreeting('Hello, World!'));
  // }
   constructor(props) {
       super(props)
       this.state = {
         data,
         searchText: '',
         dataTest1Value: '全部',
         dataTest2: [],
         dataTest2Value: '全部',
         dataTest3: [],
         dataTest3Value: '全部',
       };
     }
  /*品牌改变*/
  handlePinPaiChange = (value) => {
    this.setState({
      dataTest2Value: '全部',
      dataTest3Value: '全部',
      dataTest3: []
    });
    if(this.state.dataTest1Value == '全部'){
      this.setState({
        dataTest2: []
      })
    };
    for(let i=0; i {
    this.setState({
      dataTest2Value: value,
      dataTest3Value: '全部',
    },() => {});
    if(this.state.dataTest2Value === '全部'){
      this.setState({
        dataTest3: []
      })
    };
    let data2 = this.state.dataTest2;
    for(let i=0; i{
    this.setState({
      dataTest3Value: value
    });
  };
  
  onSelectChange = (value) => {
    this.setState({ searchText: value });
  };
  
  render() {
    const scrollX = 14*70;
    const dianPuFengZuOptions =  this.state.dataTest2.map( (item) => {
      return(    )
    });
    // const oPtions = this.state.dataTest2Value? '': dianPuFengZuOptions  ;
    const dianPuOptions =  this.state.dataTest3.map( (item) => {
      return(    )
    });

    return (
      
日期 品牌 店铺分组 店铺
); } } YingYeMingXi.propTypes = { greetings: React.PropTypes.object };

你可能感兴趣的:(antd 合并列)