bee-table7/demo/demolist/Demo1107.js

/**
*
* @title 图片在表格中的展示
* @parent 扩展行 Expanded Row
* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer,  注：如果图片在固定列中，可以使用heightConsistent属性，当此属性为true，就不会出现错行问题
* demo1107
*/

import React, { Component } from "react";
import {Button,Tooltip} from "tinper-bee";
import Table from "../../src";

const columns = [
    {
        title: "序号",
        dataIndex: "index",
        key: "index",
        width: 80,
        render(text, record, index) {
            return index + 1;
        }
    },
    {
        title: "图样",
        dataIndex: "picture",
        key: "picture",
        render(text, record, index) {
            return <img style={{height:'50px'}} src={text} alt="Picture"/>
        }
    },
    {
        title: "组织部门",
        dataIndex: "orgDept",
        key: "orgDept",
        width: 100,
    },
    {
        title: "设施管理部门",
        dataIndex: "facilityManageUnit",
        key: "facilityManageUnit",
        width: 150,
    },
    {
        title: "案卷编号",
        dataIndex: "docketnum",
        key: "docketnum",
        width: 100,
    },
    {
        title: "数量",
        dataIndex: "num",
        key: "num",
        width: 100,
    },
    {
        title: "首次发现时间",
        dataIndex: "discoveryTime",
        key: "discoveryTime",
        width: 150,
    },
    {
        title: "实际修复时间",
        dataIndex: "repairTime",
        key: "repairTime",
        width: 150,
    }
];

const data = [
  { 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 Demo1107 extends Component {
  render() {
    return (
        <Table
          columns={columns}
          data={data}
        />
    );
  }
}

export default Demo1107;