react引用ant的table组件
import React from 'react';
import '../../css/uicss/UI.css';
import 'antd/lib/style/index.less';
import 'antd/lib/table/style/index.less';
import 'antd/dist/antd.css';
import { Table } from 'antd';
export default class Tableantd extends React.Component {
constructor(props) {
super(props);
this.showCurRowMessage = this.showCurRowMessage.bind(this);
}
componentDidMount() {
}
showCurRowMessage(record){
alert(11);
alert("key:"+record.key + " name:"+record.name + " age:" + record.age + " address:" + record.address + " description:" + record.description);
}
//展示当前行信息
render(){
let self = this;
console.log(self);
const columns = [
{ title: "姓名", dataIndex: "name", key: "name" },
{ title: "年龄", dataIndex: "age", key: "age", render: (text, record, index) => (Math.floor(record.age/10))*10+"多岁"},
{ title: "住址", dataIndex: "address", key: "address" },
{ title: "描述", dataIndex: "description", key: "description" },
{ title: "操作", dataIndex: "", key: "operation", render: function(text, record, index) {
//alert(text.operation + " " + record.operation)
return <a href="#" name="delete" onClick={function() { self.showCurRowMessage(record)} } >信息</a>; } },
//精简写法
//{ title: "操作", dataIndex: "", key: "operation", render: (text, record, index) => <a href="#" name="delete" onClick={() => self.showCurRowMessage(record)}>信息</a> },
];
const data = [
{ key: 1, name: "hyw", age: 32, address: "西湖区湖底公园1号", description: "我是hyw，今年32岁，住在西湖区湖底公园1号。", children:[
{ key: 1.1, name: "fas", age: 32, address: "西湖区湖底公园1号", description: "我是fas，今年32岁，住在西湖区湖底公园1号。" },
{ key: 1.2, name: "wyz", age: 42, address: "西湖区湖底公园2号", description: "我是wyz，今年42岁，住在西湖区湖底公园2号。" },
{ key: 1.3, name: "ldz", age: 32, address: "西湖区湖底公园3号", description: "我是ldz，今年32岁，住在西湖区湖底公园3号。" },
]},
{ key: 2, name: "lkx", age: 32, address: "西湖区湖底公园1号", description: "我是lkx，今年32岁，住在西湖区湖底公园1号。" },
{ key: 3, name: "mnk", age: 42, address: "西湖区湖底公园2号", description: "我是mnk，今年42岁，住在西湖区湖底公园2号。" },
{ key: 4, name: "xyt", age: 32, address: "西湖区湖底公园3号", description: "我是xyt，今年32岁，住在西湖区湖底公园3号。" },
{ key: 5, name: "lkx", age: 32, address: "西湖区湖底公园1号", description: "我是lkx，今年32岁，住在西湖区湖底公园1号。" },
{ key: 6, name: "mnk", age: 42, address: "西湖区湖底公园2号", description: "我是mnk，今年42岁，住在西湖区湖底公园2号。" },
{ key: 7, name: "xyt", age: 32, address: "西湖区湖底公园3号", description: "我是xyt，今年32岁，住在西湖区湖底公园3号。" },
{ key: 8, name: "lkx", age: 32, address: "西湖区湖底公园1号", description: "我是lkx，今年32岁，住在西湖区湖底公园1号。" },
{ key: 9, name: "mnk", age: 42, address: "西湖区湖底公园2号", description: "我是mnk，今年42岁，住在西湖区湖底公园2号。" },
{ key: 10, name: "xyt", age: 32, address: "西湖区湖底公园3号", description: "我是xyt，今年32岁，住在西湖区湖底公园3号。" },
{ key: 11, name: "lkx", age: 32, address: "西湖区湖底公园1号", description: "我是lkx，今年32岁，住在西湖区湖底公园1号。" },
{ key: 12, name: "mnk", age: 42, address: "西湖区湖底公园2号", description: "我是mnk，今年42岁，住在西湖区湖底公园2号。" },
{ key: 13, name: "xyt", age: 32, address: "西湖区湖底公园3号", description: "我是xyt，今年32岁，住在西湖区湖底公园3号。" },
];
const rowSelection = {
onChange(selectedRowKeys, selectedRows) {
console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows);
},
onSelect(record, selected, selectedRows) {
console.log(record, selected, selectedRows);
},
onSelectAll(selected, selectedRows, changeRows) {
console.log(selected, selectedRows, changeRows);
}
}
return(
<Table columns={columns}
rowSelection={rowSelection}
dataSource={data}
className="table"
/>
);
}
}