From 87a81b2a429353ac7aea59760dbce0d764f93cd7 Mon Sep 17 00:00:00 2001 From: huyueb <1062887235@qq.com> Date: Thu, 26 Oct 2017 16:39:21 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=B5=8C=E5=A5=97?= =?UTF-8?q?=E5=AD=90=E8=A1=A8=E6=A0=BC=E5=8A=9F=E8=83=BD=E5=92=8Cdemo?= =?UTF-8?q?=EF=BC=8C=E6=96=87=E6=A1=A3=E3=80=82=E4=BF=AE=E5=A4=8DrowRef?= =?UTF-8?q?=E5=8F=82=E6=95=B0bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/Table.css | 2 ++ build/Table.js | 2 +- demo/demolist/Demo15.js | 64 +++++++++++++++++++++++++++++++++++++++++ demo/index.js | 2 +- docs/api.md | 56 +++++++++++++++++++----------------- src/Table.js | 2 +- src/Table.scss | 3 ++ 7 files changed, 101 insertions(+), 30 deletions(-) create mode 100644 demo/demolist/Demo15.js diff --git a/build/Table.css b/build/Table.css index ea320bd..71485de 100644 --- a/build/Table.css +++ b/build/Table.css @@ -83,6 +83,8 @@ background: #f7f7f7; } .u-table tr.u-table-expanded-row:hover { background: #f7f7f7; } + .u-table tr.u-table-expanded-row .u-table { + padding: 0 40px 0 20px; } .u-table-column-hidden { display: none; } .u-table-prev-columns-page, .u-table-next-columns-page { diff --git a/build/Table.js b/build/Table.js index f6cfb74..cc91fcc 100644 --- a/build/Table.js +++ b/build/Table.js @@ -449,7 +449,7 @@ var Table = function (_Component) { }, onHoverProps, { key: key, hoverKey: key, - ref: rowRef(record, i, indent), + ref: rowRef, store: this.store }))); diff --git a/demo/demolist/Demo15.js b/demo/demolist/Demo15.js new file mode 100644 index 0000000..b230b20 --- /dev/null +++ b/demo/demolist/Demo15.js @@ -0,0 +1,64 @@ +/** +* +* @title 嵌套子表格 +* @description 通过expandedRowRender参数来实现子表格 +* +*/ + +import React, { Component } from "react"; +import Table from "../../src"; + +const columns15 = [ + { title: "用户名", dataIndex: "a", key: "a", width: 100 }, + { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 }, + { title: "年龄", dataIndex: "c", key: "c", width: 200 }, + { + title: "操作", + dataIndex: "d", + key: "d", + render(text, record, index) { + return ( + { + alert("这是第" + index + "列，内容为:" + text); + }} + > + 一些操作 + + ); + } + } +]; + +const data15 = [ + { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" }, + { a: "杨过", b: "男", c: 67, d: "操作", key: "2" }, + { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" } +]; + +class Demo15 extends Component { + expandedRowRender = () => { + return ( +
标题: 这是一个标题
} + footer={currentData =>
表尾: 我是小尾巴
} + /> + ); + }; + render() { + return ( +
标题: 这是一个标题
} + footer={currentData =>
表尾: 我是小尾巴
} + /> + ); + } +} + +export default Demo15; diff --git a/demo/index.js b/demo/index.js index 4222090..07dd9e6 100644 --- a/demo/index.js +++ b/demo/index.js @@ -11,7 +11,7 @@ const CARET = ; const CARETUP = ; -var Demo1 = require("./demolist/Demo1");var Demo10 = require("./demolist/Demo10");var Demo11 = require("./demolist/Demo11");var Demo12 = require("./demolist/Demo12");var Demo13 = require("./demolist/Demo13");var Demo14 = require("./demolist/Demo14");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var Demo8 = require("./demolist/Demo8");var Demo9 = require("./demolist/Demo9");var DemoArray = [{"example":,"title":" 简单表格","code":"/**\n*\n* @title 简单表格\n* @description\n*\n*/\n\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\n\nconst columns = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n render(text, record, index) {\n return (\n {\n alert('这是第'+index+'列，内容为:'+text);\n }}\n >\n 一些操作\n \n );\n }\n }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\nclass Demo1 extends Component {\n render() {\n return (\n
标题: 这是一个标题
}\n footer={currentData =>
表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n","desc":""},{"example":,"title":" 无数据时显示","code":"/**\n*\n* @title 无数据时显示\n* @description 无数据时显示效果展示（可自定义）\n *\n* import {Table} from 'tinper-bee';\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns10 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n ];\n \n const data10 = [\n \n ];\n\n const emptyFunc = () => 这里没有数据！\n \n class Demo10 extends Component {\n render() {\n return
;\n }\n }\n\n","desc":" 无数据时显示效果展示（可自定义）"},{"example":,"title":" 列排序","code":"/**\n*\n* @title 列排序\n* @description 点击列的上下按钮即可排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\nimport Icon from \"bee-icon\";\n\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst defaultProps11 = {\n prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n toggleSortOrder=(order, column)=> {\n let { sortOrder, data, oldData } = this.state;\n let ascend_sort = function(key) {\n return function(a, b) {\n return a.key - b.key;\n };\n };\n let descend_sort = function(key) {\n return function(a, b) {\n return b.key - a.key;\n };\n };\n if (sortOrder === order) {\n // 切换为未排序状态\n order = \"\";\n }\n if (!oldData) {\n oldData = data.concat();\n }\n if (order === \"ascend\") {\n data = data.sort(function(a, b) {\n return column.sorter(a, b);\n });\n } else if (order === \"descend\") {\n data = data.sort(function(a, b) {\n return column.sorter(b, a);\n });\n } else {\n data = oldData.concat();\n }\n this.setState({\n sortOrder: order,\n data: data,\n oldData: oldData\n });\n }\n renderColumnsDropdown(columns) {\n const { sortOrder } = this.state;\n const { prefixCls } = this.props;\n\n return columns.map(originColumn => {\n let column = Object.assign({}, originColumn);\n let sortButton;\n if (column.sorter) {\n const isAscend = sortOrder === \"ascend\";\n const isDescend = sortOrder === \"descend\";\n sortButton = (\n
\n this.toggleSortOrder(\"ascend\", column)}\n >\n \n \n this.toggleSortOrder(\"descend\", column)}\n >\n \n \n
\n );\n }\n column.title = (\n \n {column.title}\n {sortButton}\n \n );\n return column;\n });\n }\n render() {\n let columns = this.renderColumnsDropdown(columns11);\n return
;\n }\n}\nDemo11.defaultProps = defaultProps11;\n\n\n","desc":" 点击列的上下按钮即可排序"},{"example":,"title":" 全选功能","code":"/**\n*\n* @title 全选功能\n* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\nimport Checkbox from \"bee-checkbox\";\n\nconst columns12 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data12 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst defaultProps12 = {\n prefixCls: \"bee-table\",\n multiSelect: {\n type: \"checkbox\",\n param: \"key\"\n }\n};\nclass Demo12 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n checkedAll:false,\n checkedArray: [\n false,\n false,\n false,\n ],\n data: data12\n };\n }\n onAllCheckChange = () => {\n let self = this;\n let checkedArray = [];\n let listData = self.state.data.concat();\n let selIds = [];\n // let id = self.props.multiSelect.param;\n for (var i = 0; i < self.state.checkedArray.length; i++) {\n checkedArray[i] = !self.state.checkedAll;\n }\n // if (self.state.checkedAll) {\n // selIds = [];\n // } else {\n // for (var i = 0; i < listData.length; i++) {\n // selIds[i] = listData[i][id];\n // }\n // }\n self.setState({\n checkedAll: !self.state.checkedAll,\n checkedArray: checkedArray,\n // selIds: selIds\n });\n // self.props.onSelIds(selIds);\n };\n onCheckboxChange = (text, record, index) => {\n let self = this;\n let allFlag = false;\n // let selIds = self.state.selIds;\n // let id = self.props.postId;\n let checkedArray = self.state.checkedArray.concat();\n // if (self.state.checkedArray[index]) {\n // selIds.remove(record[id]);\n // } else {\n // selIds.push(record[id]);\n // }\n checkedArray[index] = !self.state.checkedArray[index];\n for (var i = 0; i < self.state.checkedArray.length; i++) {\n if (!checkedArray[i]) {\n allFlag = false;\n break;\n } else {\n allFlag = true;\n }\n }\n self.setState({\n checkedAll: allFlag,\n checkedArray: checkedArray,\n // selIds: selIds\n });\n // self.props.onSelIds(selIds);\n };\n renderColumnsMultiSelect(columns) {\n const { data,checkedArray } = this.state;\n const { multiSelect } = this.props;\n let select_column = {};\n let indeterminate_bool = false;\n // let indeterminate_bool1 = true;\n if (multiSelect && multiSelect.type === \"checkbox\") {\n let i = checkedArray.length;\n while(i--){\n if(checkedArray[i]){\n indeterminate_bool = true;\n break;\n }\n }\n let defaultColumns = [\n {\n title: (\n \n ),\n key: \"checkbox\",\n dataIndex: \"checkbox\",\n width: \"5%\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n columns = defaultColumns.concat(columns);\n }\n return columns;\n }\n render() {\n let columns = this.renderColumnsMultiSelect(columns12);\n return
;\n }\n}\nDemo12.defaultProps = defaultProps12;\n\n","desc":" 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）"},{"example":,"title":" 列排序、全选功能、合计","code":"/**\n*\n* @title 列排序、全选功能、合计\n* @description 列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）\n*\n*/\n\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Checkbox from \"bee-checkbox\";\nimport multiSelect from \"../../src/lib/multiSelect.js\";\nimport sort from \"../../src/lib/sort.js\";\nimport sum from \"../../src/lib/sum.js\";\n\nconst columns13 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol:true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data13 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\nclass Demo13 extends Component {\n getSelectedDataFunc = (data) =>{\n console.log(data)\n }\n render() {\n let multiObj = {\n type: \"checkbox\",\n };\n let ComplexTable = multiSelect(sum(sort(Table)));\n return (\n
\n \n
\n );\n }\n}\n\n","desc":" 列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）"},{"example":,"title":" 编辑态表格","code":"/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）\n*\n*/\n\nimport Button from \"bee-button\";\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Animate from \"bee-animate\";\nimport Icon from \"bee-icon\";\nimport Input from \"bee-form-control\";\nimport Checkbox from \"bee-checkbox\";\nimport Select from \"bee-select\";\nimport Popconfirm from \"bee-popconfirm\";\nimport InputRender from \"../../src/render/InputRender.js\";\nimport DateRender from \"../../src/render/DateRender.js\";\nimport SelectRender from \"../../src/render/SelectRender.js\";\n\n//日期控件引入\nimport DatePicker from \"bee-datepicker\";\nimport MonthPicker, { WeekPicker, RangePicker } from \"bee-datepicker\";\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\n\nclass Demo14 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n number: \"10\",\n age: \"y\",\n address: \"111\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n },\n {\n key: \"1\",\n name: \"落雁\",\n number: \"100\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n },\n {\n key: \"2\",\n name: \"闭月\",\n number: \"1000\",\n age: \"n\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n },\n {\n key: \"3\",\n name: \"羞花\",\n number: \"9999\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"普通输入\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"150px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"货币输入\",\n dataIndex: \"number\",\n key: \"number\",\n width: \"150px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"复选\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"下拉框\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n }\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = value => {\n console.log(`selected ${value}`);\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n
\n \n 添加\n \n \n
\n );\n }\n}\n\n\n","desc":" 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）"},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）\n*\n*/\n\nimport Button from \"bee-button\";\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Animate from \"bee-animate\";\nimport Icon from \"bee-icon\";\nimport Input from \"bee-form-control\";\nimport Popconfirm from \"bee-popconfirm\";\n\nclass EditableCell extends React.Component {\n state = {\n value: this.props.value,\n editable: false\n };\n handleChange = e => {\n const value = e.target.value;\n this.setState({ value });\n };\n check = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n edit = () => {\n this.setState({ editable: true });\n };\n handleKeydown = event => {\n if (event.keyCode == 13) {\n this.check();\n }\n };\n render() {\n const { value, editable } = this.state;\n return (\n
\n {editable ? (\n
\n \n \n
\n ) : (\n
\n {value || \" \"}\n \n
\n )}\n
\n );\n }\n}\n\nclass Demo2 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [\n {\n title: \"姓名\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"30%\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"年龄\",\n dataIndex: \"age\",\n key: \"age\"\n },\n {\n title: \"你懂的\",\n dataIndex: \"address\",\n key: \"address\"\n },\n {\n title: \"操作\",\n dataIndex: \"operation\",\n key: \"operation\",\n render: (text, record, index) => {\n return this.state.dataSource.length > 1 ? (\n \n \n \n ) : null;\n }\n }\n ];\n\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n age: \"18\",\n address: \"96, 77, 89\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n age: \"16\",\n address: \"90, 70, 80\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n age: \"17\",\n address: \"80, 60, 80\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n age: \"20\",\n address: \"120, 60, 90\"\n }\n ],\n count: 4\n };\n }\n onCellChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: `100 100 100`\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n
\n \n 添加\n \n \n
\n );\n }\n}\n\n\n","desc":" 这是带有增删改功能的表格（此编辑功能未使用render组件）"},{"example":,"title":" 更灵活的表格","code":"/**\n*\n* @title 更灵活的表格\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nimport Button from 'bee-button';\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\nconst { ColumnGroup, Column } = Table;\n\nconst data3 = [\n { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\n];\n\nclass Demo3 extends Component {\n render () {\n return (\n\n
\n \n \n \n \n \n {\n return (\n \n );\n }}\n />\n
\n )\n }\n}\n\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 树形数据展示","code":"/**\n*\n* @title 树形数据展示\n* @description 通过在data中配置children数据，来自动生成树形数据\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\n }\n];\nclass Demo4 extends Component {\n render() {\n return ;\n }\n}\n\n\n","desc":" 通过在data中配置children数据，来自动生成树形数据"},{"example":,"title":" 固定列","code":"/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\n\nconst columns5 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\",\n fixed: \"left\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data5 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo5 extends Component {\n render() {\n return
;\n }\n}\n\n","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns6 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data6 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo6 extends Component {\n render() {\n return
;\n }\n}\n\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)"},{"example":,"title":" 主子表","code":"/**\n *\n * @title 主子表\n * @description 主表点击子表联动\n *\n */\n\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\n\nconst columns7 = [\n { title: \"班级\", dataIndex: \"a\", key: \"a\" },\n { title: \"人数\", dataIndex: \"b\", key: \"b\" },\n { title: \"班主任\", dataIndex: \"c\", key: \"c\" },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data7 = [\n { a: \"02级一班\", b: \"2\", c: \"欧阳锋\", d: \"大侠\", key: \"1\" },\n { a: \"03级二班\", b: \"3\", c: \"归海一刀\", d: \"大侠\", key: \"2\" },\n { a: \"05级三班\", b: \"1\", c: \"一拳超人\", d: \"愣头青\", key: \"3\" }\n];\n\nconst columns7_1 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\" },\n { title: \"班级\", dataIndex: \"b\", key: \"b\" },\n { title: \"系别\", dataIndex: \"c\", key: \"c\" }\n];\n\nclass Demo7 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n children_data: []\n };\n }\n\n rowclick = (record, index) => {\n if (record.a === \"02级一班\") {\n this.setState({\n children_data: [\n { a: \"郭靖\", b: \"02级一班\", c: \"文学系\", key: \"1\" },\n { a: \"黄蓉\", b: \"02级一班\", c: \"文学系\", key: \"2\" }\n ]\n });\n } else if (record.a === \"03级二班\") {\n this.setState({\n children_data: [\n { a: \"杨过\", b: \"03级二班\", c: \"外语系\", key: \"1\" },\n { a: \"小龙女\", b: \"03级二班\", c: \"外语系\", key: \"2\" },\n { a: \"傻姑\", b: \"03级二班\", c: \"外语系\", key: \"3\" }\n ]\n });\n } else if (record.a === \"05级三班\") {\n this.setState({\n children_data: [{ a: \"金圣叹\", b: \"05级三班\", c: \"美术系\", key: \"1\" }]\n });\n }\n };\n\n render() {\n return (\n
\n
标题: 我是主表
}\n />\n
标题: 我是子表
}\n />\n
\n );\n }\n}\n\n\n","desc":" 主表点击子表联动"},{"example":,"title":" 表格+分页","code":"/**\n *\n * @title 表格+分页\n * @description 点击分页联动表格\n *\n *import {Table} from 'tinper-bee';\n */\n\nimport React, { Component } from \"react\";\n\nimport Table from \"../../src\";\nimport Pagination from \"bee-pagination\";\n\nconst columns8 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst pageData = {\n 1: [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n ],\n 2: [\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, d: \"大侠\", key: \"1\" },\n { a: \"芙蓉妹妹\", b: \"女\", c: 23, d: \"内行\", key: \"2\" }\n ]\n};\n\nclass Demo8 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: pageData[1],\n activePage: 1\n };\n }\n\n handleSelect(eventKey) {\n this.setState({\n data: pageData[eventKey],\n activePage: eventKey\n });\n }\n\n render() {\n return (\n
\n
\n \n \n );\n }\n}\n\n","desc":" 点击分页联动表格"},{"example":,"title":" 表格+搜索","code":"/**\n *\n * @title 表格+搜索\n * @description 搜索刷新表格数据\n *\n *\n * import {Table} from 'tinper-bee';\n */\n\nimport React, { Component } from \"react\";\n\nimport Table from \"../../src\";\nimport Icon from \"bee-icon\";\nimport InputGroup from \"bee-input-group\";\nimport FormControl from \"bee-form-control\";\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let { onSearch } = this.props;\n this.setState({\n empty: true\n });\n onSearch && onSearch(this.state.searchValue);\n };\n\n /**\n * 捕获回车\n * @param e\n */\n handleKeyDown = e => {\n if (e.keyCode === 13) {\n this.handleSearch();\n }\n };\n\n /**\n * 输入框改变\n * @param e\n */\n handleChange = e => {\n this.setState({\n searchValue: e.target.value\n });\n };\n\n /**\n * 清空输入框\n */\n emptySearch = () => {\n let { onEmpty } = this.props;\n this.setState({\n searchValue: \"\",\n empty: false\n });\n onEmpty && onEmpty();\n };\n\n render() {\n return (\n \n \n {this.state.empty ? (\n \n ) : null}\n\n \n \n \n \n );\n }\n}\n\nconst columns9 = [\n {\n title: \"姓名\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst userData = [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n];\n\nclass Demo9 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: userData\n };\n }\n\n handleSearch = value => {\n if (value === \"\") {\n return this.setState({\n data: userData\n });\n }\n let regExp = new RegExp(value, \"ig\");\n let data = userData.filter(item => regExp.test(item.a));\n this.setState({\n data\n });\n };\n\n handleEmpty = () => {\n this.setState({\n data: userData\n });\n };\n\n render() {\n return (\n
\n
\n \n
\n
\n \n );\n }\n}\n\n\n","desc":" 搜索刷新表格数据"}] +var Demo1 = require("./demolist/Demo1");var Demo10 = require("./demolist/Demo10");var Demo11 = require("./demolist/Demo11");var Demo12 = require("./demolist/Demo12");var Demo13 = require("./demolist/Demo13");var Demo14 = require("./demolist/Demo14");var Demo15 = require("./demolist/Demo15");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var Demo8 = require("./demolist/Demo8");var Demo9 = require("./demolist/Demo9");var DemoArray = [{"example":,"title":" 简单表格","code":"/**\n*\n* @title 简单表格\n* @description\n*\n*/\n\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\n\nconst columns = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n render(text, record, index) {\n return (\n {\n alert('这是第'+index+'列，内容为:'+text);\n }}\n >\n 一些操作\n \n );\n }\n }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\nclass Demo1 extends Component {\n render() {\n return (\n
标题: 这是一个标题
}\n footer={currentData =>
表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n","desc":""},{"example":,"title":" 无数据时显示","code":"/**\n*\n* @title 无数据时显示\n* @description 无数据时显示效果展示（可自定义）\n *\n* import {Table} from 'tinper-bee';\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns10 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n ];\n \n const data10 = [\n \n ];\n\n const emptyFunc = () => 这里没有数据！\n \n class Demo10 extends Component {\n render() {\n return
;\n }\n }\n\n","desc":" 无数据时显示效果展示（可自定义）"},{"example":,"title":" 列排序","code":"/**\n*\n* @title 列排序\n* @description 点击列的上下按钮即可排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\nimport Icon from \"bee-icon\";\n\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst defaultProps11 = {\n prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n toggleSortOrder=(order, column)=> {\n let { sortOrder, data, oldData } = this.state;\n let ascend_sort = function(key) {\n return function(a, b) {\n return a.key - b.key;\n };\n };\n let descend_sort = function(key) {\n return function(a, b) {\n return b.key - a.key;\n };\n };\n if (sortOrder === order) {\n // 切换为未排序状态\n order = \"\";\n }\n if (!oldData) {\n oldData = data.concat();\n }\n if (order === \"ascend\") {\n data = data.sort(function(a, b) {\n return column.sorter(a, b);\n });\n } else if (order === \"descend\") {\n data = data.sort(function(a, b) {\n return column.sorter(b, a);\n });\n } else {\n data = oldData.concat();\n }\n this.setState({\n sortOrder: order,\n data: data,\n oldData: oldData\n });\n }\n renderColumnsDropdown(columns) {\n const { sortOrder } = this.state;\n const { prefixCls } = this.props;\n\n return columns.map(originColumn => {\n let column = Object.assign({}, originColumn);\n let sortButton;\n if (column.sorter) {\n const isAscend = sortOrder === \"ascend\";\n const isDescend = sortOrder === \"descend\";\n sortButton = (\n
\n this.toggleSortOrder(\"ascend\", column)}\n >\n \n \n this.toggleSortOrder(\"descend\", column)}\n >\n \n \n
\n );\n }\n column.title = (\n \n {column.title}\n {sortButton}\n \n );\n return column;\n });\n }\n render() {\n let columns = this.renderColumnsDropdown(columns11);\n return
;\n }\n}\nDemo11.defaultProps = defaultProps11;\n\n\n","desc":" 点击列的上下按钮即可排序"},{"example":,"title":" 全选功能","code":"/**\n*\n* @title 全选功能\n* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\nimport Checkbox from \"bee-checkbox\";\n\nconst columns12 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data12 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst defaultProps12 = {\n prefixCls: \"bee-table\",\n multiSelect: {\n type: \"checkbox\",\n param: \"key\"\n }\n};\nclass Demo12 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n checkedAll:false,\n checkedArray: [\n false,\n false,\n false,\n ],\n data: data12\n };\n }\n onAllCheckChange = () => {\n let self = this;\n let checkedArray = [];\n let listData = self.state.data.concat();\n let selIds = [];\n // let id = self.props.multiSelect.param;\n for (var i = 0; i < self.state.checkedArray.length; i++) {\n checkedArray[i] = !self.state.checkedAll;\n }\n // if (self.state.checkedAll) {\n // selIds = [];\n // } else {\n // for (var i = 0; i < listData.length; i++) {\n // selIds[i] = listData[i][id];\n // }\n // }\n self.setState({\n checkedAll: !self.state.checkedAll,\n checkedArray: checkedArray,\n // selIds: selIds\n });\n // self.props.onSelIds(selIds);\n };\n onCheckboxChange = (text, record, index) => {\n let self = this;\n let allFlag = false;\n // let selIds = self.state.selIds;\n // let id = self.props.postId;\n let checkedArray = self.state.checkedArray.concat();\n // if (self.state.checkedArray[index]) {\n // selIds.remove(record[id]);\n // } else {\n // selIds.push(record[id]);\n // }\n checkedArray[index] = !self.state.checkedArray[index];\n for (var i = 0; i < self.state.checkedArray.length; i++) {\n if (!checkedArray[i]) {\n allFlag = false;\n break;\n } else {\n allFlag = true;\n }\n }\n self.setState({\n checkedAll: allFlag,\n checkedArray: checkedArray,\n // selIds: selIds\n });\n // self.props.onSelIds(selIds);\n };\n renderColumnsMultiSelect(columns) {\n const { data,checkedArray } = this.state;\n const { multiSelect } = this.props;\n let select_column = {};\n let indeterminate_bool = false;\n // let indeterminate_bool1 = true;\n if (multiSelect && multiSelect.type === \"checkbox\") {\n let i = checkedArray.length;\n while(i--){\n if(checkedArray[i]){\n indeterminate_bool = true;\n break;\n }\n }\n let defaultColumns = [\n {\n title: (\n \n ),\n key: \"checkbox\",\n dataIndex: \"checkbox\",\n width: \"5%\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n columns = defaultColumns.concat(columns);\n }\n return columns;\n }\n render() {\n let columns = this.renderColumnsMultiSelect(columns12);\n return
;\n }\n}\nDemo12.defaultProps = defaultProps12;\n\n","desc":" 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）"},{"example":,"title":" 列排序、全选功能、合计","code":"/**\n*\n* @title 列排序、全选功能、合计\n* @description 列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）\n*\n*/\n\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Checkbox from \"bee-checkbox\";\nimport multiSelect from \"../../src/lib/multiSelect.js\";\nimport sort from \"../../src/lib/sort.js\";\nimport sum from \"../../src/lib/sum.js\";\n\nconst columns13 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol:true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data13 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\nclass Demo13 extends Component {\n getSelectedDataFunc = (data) =>{\n console.log(data)\n }\n render() {\n let multiObj = {\n type: \"checkbox\",\n };\n let ComplexTable = multiSelect(sum(sort(Table)));\n return (\n
\n \n
\n );\n }\n}\n\n","desc":" 列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）"},{"example":,"title":" 编辑态表格","code":"/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）\n*\n*/\n\nimport Button from \"bee-button\";\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Animate from \"bee-animate\";\nimport Icon from \"bee-icon\";\nimport Input from \"bee-form-control\";\nimport Checkbox from \"bee-checkbox\";\nimport Select from \"bee-select\";\nimport Popconfirm from \"bee-popconfirm\";\nimport InputRender from \"../../src/render/InputRender.js\";\nimport DateRender from \"../../src/render/DateRender.js\";\nimport SelectRender from \"../../src/render/SelectRender.js\";\n\n//日期控件引入\nimport DatePicker from \"bee-datepicker\";\nimport MonthPicker, { WeekPicker, RangePicker } from \"bee-datepicker\";\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\n\nclass Demo14 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n number: \"10\",\n age: \"y\",\n address: \"111\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n },\n {\n key: \"1\",\n name: \"落雁\",\n number: \"100\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n },\n {\n key: \"2\",\n name: \"闭月\",\n number: \"1000\",\n age: \"n\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n },\n {\n key: \"3\",\n name: \"羞花\",\n number: \"9999\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\",\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"普通输入\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"150px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"货币输入\",\n dataIndex: \"number\",\n key: \"number\",\n width: \"150px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"复选\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"下拉框\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n }\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = value => {\n console.log(`selected ${value}`);\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n
\n \n 添加\n \n \n
\n );\n }\n}\n\n\n","desc":" 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）"},{"example":,"title":" 嵌套子表格","code":"/**\n*\n* @title 嵌套子表格\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\n\nconst columns15 = [\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n render(text, record, index) {\n return (\n {\n alert(\"这是第\" + index + \"列，内容为:\" + text);\n }}\n >\n 一些操作\n \n );\n }\n }\n];\n\nconst data15 = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\nclass Demo15 extends Component {\n expandedRowRender = () => {\n return (\n
标题: 这是一个标题
}\n footer={currentData =>
表尾: 我是小尾巴
}\n />\n );\n };\n render() {\n return (\n
标题: 这是一个标题
}\n footer={currentData =>
表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n","desc":" 通过expandedRowRender参数来实现子表格"},{"example":,"title":" 增删改表格","code":"/**\n*\n* @title 增删改表格\n* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）\n*\n*/\n\nimport Button from \"bee-button\";\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\nimport Animate from \"bee-animate\";\nimport Icon from \"bee-icon\";\nimport Input from \"bee-form-control\";\nimport Popconfirm from \"bee-popconfirm\";\n\nclass EditableCell extends React.Component {\n state = {\n value: this.props.value,\n editable: false\n };\n handleChange = e => {\n const value = e.target.value;\n this.setState({ value });\n };\n check = () => {\n this.setState({ editable: false });\n if (this.props.onChange) {\n this.props.onChange(this.state.value);\n }\n };\n edit = () => {\n this.setState({ editable: true });\n };\n handleKeydown = event => {\n if (event.keyCode == 13) {\n this.check();\n }\n };\n render() {\n const { value, editable } = this.state;\n return (\n
\n {editable ? (\n
\n \n \n
\n ) : (\n
\n {value || \" \"}\n \n
\n )}\n
\n );\n }\n}\n\nclass Demo2 extends React.Component {\n constructor(props) {\n super(props);\n this.columns = [\n {\n title: \"姓名\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"30%\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"年龄\",\n dataIndex: \"age\",\n key: \"age\"\n },\n {\n title: \"你懂的\",\n dataIndex: \"address\",\n key: \"address\"\n },\n {\n title: \"操作\",\n dataIndex: \"operation\",\n key: \"operation\",\n render: (text, record, index) => {\n return this.state.dataSource.length > 1 ? (\n \n \n \n ) : null;\n }\n }\n ];\n\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n age: \"18\",\n address: \"96, 77, 89\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n age: \"16\",\n address: \"90, 70, 80\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n age: \"17\",\n address: \"80, 60, 80\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n age: \"20\",\n address: \"120, 60, 90\"\n }\n ],\n count: 4\n };\n }\n onCellChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: `100 100 100`\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n
\n \n 添加\n \n \n
\n );\n }\n}\n\n\n","desc":" 这是带有增删改功能的表格（此编辑功能未使用render组件）"},{"example":,"title":" 更灵活的表格","code":"/**\n*\n* @title 更灵活的表格\n* @description 手写表格的头组件来达到更灵活的配置表格\n*\n*/\n\n\nimport Button from 'bee-button';\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\nconst { ColumnGroup, Column } = Table;\n\nconst data3 = [\n { a: '北京', b: '北京', c: '250', d: 2, key: '1' },\n];\n\nclass Demo3 extends Component {\n render () {\n return (\n\n
\n \n \n \n \n \n {\n return (\n \n );\n }}\n />\n
\n )\n }\n}\n\n","desc":" 手写表格的头组件来达到更灵活的配置表格"},{"example":,"title":" 树形数据展示","code":"/**\n*\n* @title 树形数据展示\n* @description 通过在data中配置children数据，来自动生成树形数据\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\n }\n];\nclass Demo4 extends Component {\n render() {\n return ;\n }\n}\n\n\n","desc":" 通过在data中配置children数据，来自动生成树形数据"},{"example":,"title":" 固定列","code":"/**\n*\n* @title 固定列\n* @description 固定列到表格的某侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\n\nconst columns5 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\",\n fixed: \"left\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data5 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo5 extends Component {\n render() {\n return
;\n }\n}\n\n","desc":" 固定列到表格的某侧"},{"example":,"title":" 固定表头","code":"/**\n*\n* @title 固定表头\n* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport Table from 'bee-table';\n\n\nconst columns6 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n { title: \"Column 2\", dataIndex: \"address\", key: \"2\" },\n { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n { title: \"Column 5\", dataIndex: \"address\", key: \"5\" },\n { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n];\n\nconst data6 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo6 extends Component {\n render() {\n return
;\n }\n}\n\n","desc":" 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)"},{"example":,"title":" 主子表","code":"/**\n *\n * @title 主子表\n * @description 主表点击子表联动\n *\n */\n\nimport React, { Component } from \"react\";\nimport Table from \"../../src\";\n\nconst columns7 = [\n { title: \"班级\", dataIndex: \"a\", key: \"a\" },\n { title: \"人数\", dataIndex: \"b\", key: \"b\" },\n { title: \"班主任\", dataIndex: \"c\", key: \"c\" },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data7 = [\n { a: \"02级一班\", b: \"2\", c: \"欧阳锋\", d: \"大侠\", key: \"1\" },\n { a: \"03级二班\", b: \"3\", c: \"归海一刀\", d: \"大侠\", key: \"2\" },\n { a: \"05级三班\", b: \"1\", c: \"一拳超人\", d: \"愣头青\", key: \"3\" }\n];\n\nconst columns7_1 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\" },\n { title: \"班级\", dataIndex: \"b\", key: \"b\" },\n { title: \"系别\", dataIndex: \"c\", key: \"c\" }\n];\n\nclass Demo7 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n children_data: []\n };\n }\n\n rowclick = (record, index) => {\n if (record.a === \"02级一班\") {\n this.setState({\n children_data: [\n { a: \"郭靖\", b: \"02级一班\", c: \"文学系\", key: \"1\" },\n { a: \"黄蓉\", b: \"02级一班\", c: \"文学系\", key: \"2\" }\n ]\n });\n } else if (record.a === \"03级二班\") {\n this.setState({\n children_data: [\n { a: \"杨过\", b: \"03级二班\", c: \"外语系\", key: \"1\" },\n { a: \"小龙女\", b: \"03级二班\", c: \"外语系\", key: \"2\" },\n { a: \"傻姑\", b: \"03级二班\", c: \"外语系\", key: \"3\" }\n ]\n });\n } else if (record.a === \"05级三班\") {\n this.setState({\n children_data: [{ a: \"金圣叹\", b: \"05级三班\", c: \"美术系\", key: \"1\" }]\n });\n }\n };\n\n render() {\n return (\n
\n
标题: 我是主表
}\n />\n
标题: 我是子表
}\n />\n
\n );\n }\n}\n\n\n","desc":" 主表点击子表联动"},{"example":,"title":" 表格+分页","code":"/**\n *\n * @title 表格+分页\n * @description 点击分页联动表格\n *\n *import {Table} from 'tinper-bee';\n */\n\nimport React, { Component } from \"react\";\n\nimport Table from \"../../src\";\nimport Pagination from \"bee-pagination\";\n\nconst columns8 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst pageData = {\n 1: [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n ],\n 2: [\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, d: \"大侠\", key: \"1\" },\n { a: \"芙蓉妹妹\", b: \"女\", c: 23, d: \"内行\", key: \"2\" }\n ]\n};\n\nclass Demo8 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: pageData[1],\n activePage: 1\n };\n }\n\n handleSelect(eventKey) {\n this.setState({\n data: pageData[eventKey],\n activePage: eventKey\n });\n }\n\n render() {\n return (\n
\n
\n \n \n );\n }\n}\n\n","desc":" 点击分页联动表格"},{"example":,"title":" 表格+搜索","code":"/**\n *\n * @title 表格+搜索\n * @description 搜索刷新表格数据\n *\n *\n * import {Table} from 'tinper-bee';\n */\n\nimport React, { Component } from \"react\";\n\nimport Table from \"../../src\";\nimport Icon from \"bee-icon\";\nimport InputGroup from \"bee-input-group\";\nimport FormControl from \"bee-form-control\";\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let { onSearch } = this.props;\n this.setState({\n empty: true\n });\n onSearch && onSearch(this.state.searchValue);\n };\n\n /**\n * 捕获回车\n * @param e\n */\n handleKeyDown = e => {\n if (e.keyCode === 13) {\n this.handleSearch();\n }\n };\n\n /**\n * 输入框改变\n * @param e\n */\n handleChange = e => {\n this.setState({\n searchValue: e.target.value\n });\n };\n\n /**\n * 清空输入框\n */\n emptySearch = () => {\n let { onEmpty } = this.props;\n this.setState({\n searchValue: \"\",\n empty: false\n });\n onEmpty && onEmpty();\n };\n\n render() {\n return (\n \n \n {this.state.empty ? (\n \n ) : null}\n\n \n \n \n \n );\n }\n}\n\nconst columns9 = [\n {\n title: \"姓名\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst userData = [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n];\n\nclass Demo9 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: userData\n };\n }\n\n handleSearch = value => {\n if (value === \"\") {\n return this.setState({\n data: userData\n });\n }\n let regExp = new RegExp(value, \"ig\");\n let data = userData.filter(item => regExp.test(item.a));\n this.setState({\n data\n });\n };\n\n handleEmpty = () => {\n this.setState({\n data: userData\n });\n };\n\n render() {\n return (\n
\n
\n \n
\n
\n \n );\n }\n}\n\n\n","desc":" 搜索刷新表格数据"}] class Demo extends Component { diff --git a/docs/api.md b/docs/api.md index 23c9031..e4b43c0 100644 --- a/docs/api.md +++ b/docs/api.md @@ -9,33 +9,35 @@ ### Table -|参数|说明|类型|默认值| -|:--|:---|:--|:---| -|data|传入的表格数据|array|[]| -|columns|列的配置表，具体配置见下表|array|-| -|defaultExpandAllRows|默认是否展开所有行|bool|false| -|expandedRowKeys|展开的行，控制属性|array|-| -|defaultExpandedRowKeys|初始扩展行键|array|[]| -|useFixedHeader|是否使用固定表头|bool|false| -|bodyStyle|添加到tablebody上的style|object|{}| -|style|添加到table上的style|object|{}| -|rowKey|如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record）'的返回值将被用作键。| string or Function(record):string|'key'| -|rowClassName|获取行的classname|Function(record, index, indent):string|() => ''| -|expandedRowClassName|获取展开行的className|Function(recode, index, indent):string|() => ''| -|onExpand|展开行时的钩子函数|Function(expanded, record)|() => ''| -|onExpandedRowsChange|函数在扩展行更改时调用|Function(expandedRows)|() => ''| -|indentSize|indentSize为每个级别的data.i.children，更好地使用column.width指定|number|15| -|onRowClick|行的点击事件钩子函数|Function(record, index)|() => ''| -|onRowDoubleClick|行的双击事件钩子函数|Function(record, index)|() => ''| -|expandIconAsCell|是否将expandIcon作为单元格|bool|false| -|expandIconColumnIndex|expandIcon的索引，当expandIconAsCell为false时，将插入哪个列|number|0| -|showHeader|是否显示表头|bool|true| -|title|表格标题|function|-| -|footer|表格尾部|function|-| -|emptyText|无数据时显示的内容|function|() => 'No Data'| -|scroll|横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: true, y: 300 }|object|{}| -|rowRef|获取行的ref|Function(record, index, indent):string|() => null| -|getBodyWrapper|添加对table body的包装|Function(body)|body => body| +| 参数 | 说明 | 类型 | 默认值 | +| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- | +| data | 传入的表格数据 | array | [] | +| columns | 列的配置表，具体配置见下表 | array | - | +| defaultExpandAllRows | 默认是否展开所有行 | bool | false | +| expandedRowKeys | 展开的行，控制属性 | array | - | +| defaultExpandedRowKeys | 初始扩展行键 | array | [] | +| useFixedHeader | 是否使用固定表头 | bool | false | +| bodyStyle | 添加到tablebody上的style | object | {} | +| style | 添加到table上的style | object | {} | +| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record）'的返回值将被用作键。 | string or Function(record):string | 'key' | +| rowClassName | 获取行的classname | Function(record, index, indent):string | () => '' | +| expandedRowClassName | 获取展开行的className | Function(recode, index, indent):string | () => '' | +| onExpand | 展开行时的钩子函数 | Function(expanded, record) | () => '' | +| onExpandedRowsChange | 函数在扩展行更改时调用 | Function(expandedRows) | () => '' | +| indentSize | indentSize为每个级别的data.i.children，更好地使用column.width指定 | number | 15 | +| onRowClick | 行的点击事件钩子函数 | Function(record, index) | () => '' | +| onRowDoubleClick | 行的双击事件钩子函数 | Function(record, index) | () => '' | +| expandIconAsCell | 是否将expandIcon作为单元格 | bool | false | +| expandIconColumnIndex | expandIcon的索引，当expandIconAsCell为false时，将插入哪个列 | number | 0 | +| showHeader | 是否显示表头 | bool | true | +| title | 表格标题 | Function | - | +| footer | 表格尾部 | Function | - | +| emptyText | 无数据时显示的内容 | Function | () => 'No Data' | +| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: true, y: 300 } | object | {} | +| rowRef | 获取行的ref | Function(record, index, indent):string | () => null | +| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body | +| expandedRowRender | 额外的展开行 | Function | - | + ### Column diff --git a/src/Table.js b/src/Table.js index 08b499e..efdbc92 100644 --- a/src/Table.js +++ b/src/Table.js @@ -381,7 +381,7 @@ class Table extends Component{ {...onHoverProps} key={key} hoverKey={key} - ref={rowRef(record, i, indent)} + ref={rowRef} store={this.store} /> ); diff --git a/src/Table.scss b/src/Table.scss index 3459a77..d2ff08e 100644 --- a/src/Table.scss +++ b/src/Table.scss @@ -144,6 +144,9 @@ $table-move-in-color: $bg-color-base; &:hover { background: #f7f7f7; } + .u-table{ + padding: 0 40px 0 20px; + } } &-column-hidden { display: none;