TableWithPage

简介：tmi-table

这是钛米前端物料库中表格区块，可使用AppWorks进行引入

基础样式

配合导航区块使用

import React from 'react'
import TableWithPage from './src'
import TmiNavigate from '../Navigate/src'
export default () => {
	const tableData = {
		dataSource: [],
		columns: [
			{ title: '设备类型', dataIndex: 'type', },
			{ title: '设备SN号', dataIndex: 'sn' },
			{ title: '名称', dataIndex: 'name' },
			{ title: '所属手术室', dataIndex: 'operatingRoomName' },
			{ title: '所属位置', dataIndex: 'location' },
			{ title: '状态', dataIndex: 'status' },
			{ title: '操作',  }
		]
	}

	const pageData = {
		current: 1,
		pageSize: 10,
		total: 0,
	}
	return <TmiNavigate>
		<TableWithPage batch={{}} tableData={tableData} pageData={pageData}/>
	</TmiNavigate>
}

添加批量选择

import React from 'react'
import TableWithPage from './src'
export default () => {
	const tableData = {
		dataSource: [],
		columns: [
			{ title: '设备类型', dataIndex: 'type', },
			{ title: '设备SN号', dataIndex: 'sn' },
			{ title: '名称', dataIndex: 'name' },
			{ title: '所属手术室', dataIndex: 'operatingRoomName' },
			{ title: '所属位置', dataIndex: 'location' },
			{ title: '状态', dataIndex: 'status' },
			{ title: '操作',  }
		]
	}

	const pageData = {
		current: 1,
		pageSize: 10,
		total: 0,
	}

	const rowSelection = {
		onChange: (selectedRowKeys, selectedRows) => {
		  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
		},
		getCheckboxProps: (record) => ({
		  disabled: record.name === 'Disabled User',
		  // Column configuration not to be checked
		  name: record.name,
		}),
	  };
	return <TableWithPage batch={rowSelection} tableData={tableData} pageData={pageData}/>
}

表格上方其他关联操作

import React from 'react'
import TableWithPage from './src'

export default () => {
	const tableData = {
		dataSource: [],
		columns: [
			{ title: '设备类型', dataIndex: 'type', },
			{ title: '设备SN号', dataIndex: 'sn' },
			{ title: '名称', dataIndex: 'name' },
			{ title: '所属手术室', dataIndex: 'operatingRoomName' },
			{ title: '所属位置', dataIndex: 'location' },
			{ title: '状态', dataIndex: 'status' },
			{ title: '操作',  }
		]
	}

	const pageData = {
		current: 1,
		pageSize: 10,
		total: 0,
	}
	return <TableWithPage relevance={true} tableData={tableData} pageData={pageData}/>
}