bootstrap-table、antd-table组件(react)实现首行、首列固定的表格

小剧情

成本系统规划使用react，可是基于业务需要离不开老版OA（bootstrap jquery）中的工作流，本来是可以尽情使用react的，前边挡头大象的无力感还是有的。

多次开会渴望的眼神盯着师傅，弱弱的问，用用react吧。还好盛情没有被辜负，允许将其中的报表展示部分用react做。知足了，机会无大小，有就是好的，当珍惜。积少成多，始终会量变引起质变的。

项目需求需要旧版OA、react版的表格首行、首列固定。自己写当然可以，如果有现成的轮子提高开发效率，为什么不用呢？

下边就是两个版本中选择的框架使用示例：bootstrap-table、antd的table组件

bootstrap-table

（1）js代码：

由于数据代码过长，这里的数据代码示例只是一部分。

var theColumns = [
	{
	    field: 'agencyName',
	    title: '<div class="fixed_columns_width100">部门</div>'
	},
	{
	    field: 'realName',
	    title: '<div class="fixed_columns_width100">姓名</div>'
	},
	{
	    field: 'company',
	    title: '<div class="fixed_columns_width100">公司</div>'
	},
	{
	    field: 'post',
	    title: '<div class="fixed_columns_width100">岗位</div>'
	},
	{
	    field: 'allDays',
	    title: '<div class="fixed_columns_width100">工时合计</div>'
	}
];

var theData = [
	{
	    agencyName: '部门名称01',
	    realName: '姓名01',
	    company: '公司01',
	    post: '职位01',
	    allDays: '1'
	},
	{
	    agencyName: '部门名称02',
	    realName: '姓名02',
	    company: '公司02',
	    post: '职位02',
	    allDays: '2'
	}	
];

$('#table').bootstrapTable('destroy').bootstrapTable({
    columns: theColumns,
    data: theData,
    formatNoMatches:function(){
        return "暂无数据";
    },
    height:120,  //高度可以根据实际页面动态计算
    fixedColumns: true,
    fixedNumber: 1
});

（2）html代码

    <table id="table" class="table table-striped">

（3）完整代码

点击这里进行下载，文件中是完整的代码

antd-table组件

（1）js代码

为清晰展示table组件需要的数据结构，且完整的代码篇幅过长，这里只是数据模型的一部分。

//表头
let columns = [
   {
        key:`department01`,
        title:<span  className="fixed_columns_width130">部门</span>,
        dataIndex:'department',
        width:100,
        fixed:'left'  //控制列是否固定，可以多列固定，固定方向可以是left、right
    },
    {
        key:`realName01`,
        title:<span  className="fixed_columns_width100">姓名</span>,
        width:100,
        dataIndex:'realName'
    },
    {
        key:`company01`,
        title:<span  className="fixed_columns_width100">公司</span>,
        width:100,
        dataIndex:'company'
    },
    {
        key:`post01`,
        title:<span  className="fixed_columns_width130">岗位</span>,
        width:100,
        dataIndex:'post'
    },
    {
      key:`allDays01`,
      title:<span  className="fixed_columns_width130">工时合计</span>,
      width:100,
      dataIndex:'allDays'
    },
];
let tableData = [
	{
		key:'data01',
	    department: '部门名称01',
	    realName: '姓名01',
	    company: '公司01',
	    post: '职位01',
	    allDays: '1'
	},
	{
		key:'data02',
	    agencyName: '部门名称02',
	    realName: '姓名02',
	    company: '公司02',
	    post: '职位02',
	    allDays: '2'
	}
]

（2）html代码

<Table 
    columns={this.state.tableColumns} 
    dataSource={this.state.tableData} 
    pagination={false} 
    scroll={{x:true,y:110}}   //纵向高度根据实际需要进行修改，这里为展示纵向滚动条而设置。
    bordered
/>

（3）完整代码

点击这里进行下载，文件中是完整的代码

写在最后的

代码中有数据处理的相关方法，后续会有相应的介绍。