2019-04-13
npm i antd fixed-data-table -S
安装依赖
import React from 'react';
import { Table, Cell, Colum } from 'fixed-data-table2';
import { DropDown, Checkbox, Menu, Icon } from 'antd'; // 此处antd组件用于定制列使用
export default class FixedDataTable extends React.Component{
render(){
return <div className={ " 此处应定位relative " }>
<Table> /* 此处直接可copy 这儿 */
</Table>
</div>
}
}
我们主要的逻辑在定制列这块，其实这块也蛮简单的，主要是给大家提供一点点思路，供大家参考，其它地方我们都可以再这儿找到相关示例代码
<DropDown overlay={menuItem} onVisibleChange={ this.changeVisible } visible={this.state.visible} >
<Icon type="....." > //自己选喜欢的吧~
</DropDown>
changeVisible = () => {
this.setState({ visible : !this.state.visible})
}
接下来咱们从 props 上接受需要展示的 列 的信息
（需要有以下属性：width ‘这是fixed-data-table-2 中 列的必须的属性’
dataIndex 则个咱们就不用说了８
title 标题
key值
show： true/false 这块看咱们是想让它这一列默认显示还是不显示
render: FDT 的耦合性非常好，你可以让它渲染成<Tag />
<Tooltip />或者<a />标签，甚至可以绑定事件）
接下来咱们渲染 menuItem
const { data } = this.props
const { tableColum } = this.state // 表格列必须得放在state中，因为待会我们要改变它的状态
let menuItem = (
<Menu>
tableColum .map ((item,index) => {
<Menu.Item key={item.key}>
<CheckBox checked={item.show}
onChange={this.changeColumShow(index)} >
{item.title}
</Checkbox>
<Menu.Item>
})
</Menu>
)
changeColumShow = (index) => {
let { tableColum } = this.state
/* 在这里咱们可以做一些限制，比如：至少要保证它的行数不少于XX行 */
tableColum[index].show = !tableColum[index].show
this.setState({
tableColum
})
}
ok , 咱们可定制列的高性能到这儿就封装完了，同事叫我去打乒乓球，下次兴趣来了，我再写一个 上面提到的 fixed-data-table 中 render 的实现
网友评论