tuns-mobile-components/src/pages/demo/table/index.js

Tuns Design UI

import React from "react";
import MultipleTable from "components/mobile/src/table";

const TableDemo = () => {
  const rowHeader = {
    title: "保险责任",
    dataIndex: "insurance_liability",
    key: "insurance_liability",
    width: 150,
  };
  const columns = [
    {
      title: "平安保险",
      dataIndex: "company_pingan",
      key: "company_pingan",
      width: 100,
    },
    {
      title: "大地保险",
      dataIndex: "company_continent",
      key: "company_continent",
      width: 100,
    },
    {
      title: "诚泰保险",
      dataIndex: "company_championic",
      key: "company_championic",
      width: 100,
    },
  ];
  const datas = [
    {
      leftTopText: "投保执业1：服务员",
      rightTopText: "人数：5",
      columnDeleteIcon: true,
      data: [
        {
          insurance_liability: "团体意外身故、残疾、烧烫伤",
          company_pingan: "5万元",
          company_continent: "5万元",
          company_championic: "5万元",
        },
        {
          insurance_liability: "团体意外伤害医疗",
          company_pingan: "0.5万元/年",
          company_continent: "0.5万元/年",
          company_championic: "0.5万元/年",
        },
      ],
      themeData: [
        {
          insurance_liability: "保费",
          company_pingan: "516.08",
          company_continent: "469.60",
          company_championic: "472.00",
        },
      ],
    },
    {
      leftTopText: "爷",
      rightTopText: "奶",
      columnDeleteIcon: false,
      data: [
        {
          insurance_liability: "不是",
          company_pingan: "是",
          company_continent: "不是",
          company_championic: "是",
        },
        {
          insurance_liability: "不是",
          company_pingan: "是",
          company_continent: "不是",
          company_championic: "是",
        },
      ],
    },
  ];

  return (
    <div>
      <h2>UITab demo</h2>
      <MultipleTable
        rowHeader={rowHeader}
        columns={columns}
        datas={datas}
        onClickColumnHeader={(data, sectionIndex, column, columnIndex) => {
          // 至少保留一列 如果 columns 发成长度变化会自动刷新
          if (columns.length > 1) {
            columns.splice(columnIndex, 1);
          }
        }}
      />
    </div>
  );
};

export default TableDemo;