如何用'fixed-data-table-2'和'antd'封装

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 的实现