如何用'fixed-data-table-2'和'antd'封装一个rowSelect可定制列的table

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

    

   /* 此处直接可copy 这儿 */

    

}

}

---

我们主要的逻辑在定制列这块，其实这块也蛮简单的，主要是给大家提供一点点思路，供大家参考，其它地方我们都可以再这儿找到相关示例代码

            //自己选喜欢的吧~

changeVisible = () => { 

    this.setState({ visible : !this.state.visible})

}

接下来咱们从 props 上接受需要展示的  列  的信息

（需要有以下属性：width ‘这是fixed-data-table-2 中 列的必须的属性’ 

                                dataIndex　则个咱们就不用说了８

                                title    标题

                                key值

                                show： true/false  这块看咱们是想让它这一列默认显示还是不显示

                                render:  FDT 的耦合性非常好，你可以让它渲染成 

或者标签，甚至可以绑定事件）

接下来咱们渲染    menuItem

const { data } = this.props

const { tableColum  } = this.state   // 表格列必须得放在state中，因为待会我们要改变它的状态

let menuItem = (

   

        tableColum .map ((item,index) => {

           

                   

                        onChange={this.changeColumShow(index)}  >

                        {item.title}

                    

           

})

    

)

changeColumShow = (index) => {

    let { tableColum   } = this.state

    /*     在这里咱们可以做一些限制，比如：至少要保证它的行数不少于XX行      */

    tableColum[index].show = !tableColum[index].show

    this.setState({ 

        tableColum

 })

}

ok , 咱们可定制列的高性能到这儿就封装完了，同事叫我去打乒乓球，下次兴趣来了，我再写一个 上面提到的 fixed-data-table 中 render 的实现