bee-complex-grid 是基于bee-table上封装，将多选、过滤、排序、分页、固定列等多功能基于一身。在使用bee-table实现复杂功能时，需要高级组件嵌套高级组件，使用起来经常有问题。有了bee-complex-grid ，用户仅需要引入Grid即可，大大减少代码量，提供代码质量。
import Grid from "bee-complex-grid";
const columns = [
{ 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: '', key: 'd', render() {
return <a href="#">一些操作</a>;
const data = [
{ a: '令狐冲', b: '男', c: 41, key: '1' },
{ a: '杨过', b: '男', c: 67, key: '2' },
{ a: '郭靖', b: '男', c: 25, key: '3' },
class Demo extends Component {
render () {
return (
columns={columns}
data={data}
table相关API参考这里,下面是Grid扩充的API
multiSelect
是否显示多选功能或单选功能，multiSelect={{type:"radio"}}时为单选表格，multiSelect={{type:"checkbox"}}时为多选表格，传其他值时均为普通表格
Object
{type:"checkbox"}
showFilterMenu
是否显示行过滤菜单
boolean
false
columnFilterAble
是否显示列过滤功能
boolean
sheetName【excel】
设置导出excel 的sheet的名称
string
sheetIsRowFilter【excel】
是否要设置数据的行高
boolean
false
sheetHeader【excel】
设置导出excel 的Head的高度
Object
eg:{{height:30, //设置高度ifshow:false //是否显示}}
resetColumns
重置columns
function
this.refs.grid.resetColumns(columns)
exportData
要导出的数据源
array
Column(新增)
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-complex-grid
$ cd bee-complex-grid
$ npm install
