移动端表格固定列和表头

// 数据
const viewdata = {
        showmodel: "saledetailtable",
        modelcode: "saledetailtable",
        tablist: [
            {
                 '80',
                key: 'all',  // 必须和当前显示的数据键相同  例如：dataall
                title: '全部(40)'
            },
            {
                 '50',
                key: 'one',  // 例如：dataone
                title: '红色'
            },
            {
                 '50',
                key: 'two',
                title: '绿色'
            },
            {
                 '50',
                key: 'three',
                title: '黑色'
            },
            {
                 '50',
                key: 'four',
                title: '白色'
            },
        ],
        // 每一列的宽和标题
        widthlist: [
            { '100', title: "<p >规格</p>"},
            { '70', title: '销量'},
            { '90', title: '库存'},
            { '90', title: "<div>已补<i class='fa fa-address-book' style='color: #FF3E3E; margin-left: 5px'></i></div>"},
            { '90', title: '订货'},
            { '50', title: '在途'},
            { '50', title: '占用'},
        ],
        // 固定列表头
        left_header_all: [
            { '100', title: "<p >规格</p>"},
            { '70', title: '销量'},
        ],

        // 固定列内容
        left_body_all: [
            {
                code: '1',
                list: [
                    { linkurl: '1', value: "<div style='color: #0486FE'>红色/S</div>" },
                    { linkurl: '', value: '<p >100</p>' },
                ]
            },
            {
                code: '2',
                list: [
                    { linkurl: '', value: '红色/S2'},
                    { linkurl: '', value: '<p >100</p>' },
                ]
            },
            {
                code: '3',
                list: [
                    { linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
                    { linkurl: '', value: '<p >100</p>' },
                ]
            },
            {
                code: '4',
                list: [
                    { linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
                    { linkurl: '', value: '<p >100</p>' },
                ]
            },
            {
                code: '5',
                list: [
                    { linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
                    { linkurl: '', value: '<p >100</p>' },
                ]
            },
        ],
        dataall: [
            {
                code: '1',
                list: [
                    { linkurl: '1', value: "<div style='color: #0486FE'>红色/S</div>" },
                    { linkurl: '', value: '<p >100</p>' },
                    { linkurl: '', value: '300'},
                    { linkurl: '', value: '200'},
                    { linkurl: '', value: '400'},
                    { linkurl: '', value: '300'},
                    { linkurl: '',value: '500'}
                ]
            },
            {
                code: '2',
                list: [
                    { linkurl: '', value: '红色/S2'},
                    { linkurl: '', value: '<p >100</p>' },
                    { linkurl: '', value: '300'},
                    { linkurl: '', value: '200'},
                    { linkurl: '', value: '400'},
                    { linkurl: '', value: '300'},
                    { linkurl: '',value: '500'}
                ]
            },
            {
                code: '3',
                list: [
                    { linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
                    { linkurl: '', value: '<p >100</p>' },
                    { linkurl: '', value: '300'},
                    { linkurl: '', value: '200'},
                    { linkurl: '', value: '400'},
                    { linkurl: '', value: '300'},
                    { linkurl: '',value: '500'}
                ]
            },
            {
                code: '4',
                list: [
                    { linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
                    { linkurl: '', value: '<p >100</p>' },
                    { linkurl: '', value: '300'},
                    { linkurl: '', value: '200'},
                    { linkurl: '', value: '400'},
                    { linkurl: '', value: '300'},
                    { linkurl: '',value: '500'}
                ]
            },
            {
                code: '5',
                list: [
                    { linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
                    { linkurl: '', value: '<p >100</p>' },
                    { linkurl: '', value: '300'},
                    { linkurl: '', value: '200'},
                    { linkurl: '', value: '400'},
                    { linkurl: '', value: '300'},
                    { linkurl: '',value: '500'}
                ]
            }
            
        ],

        // 以下tab  红色 的数据
        dataone: [
            {
                code: '1',
                list: [
                    { linkurl: '', value: "<div style='padding: 10px'>红色/S24</div>"},
                    { linkurl: '', value: '<p >100</p>' },
                    { linkurl: '', value: '300'},
                    { linkurl: '', value: '200'},
                    { linkurl: '', value: '400'},
                    { linkurl: '', value: '300'},
                    { linkurl: '',value: '500'}
                ]
            }
            
        ],
        left_header_one: [
            { '100', title: "<p >规格</p>"},
            { '70', title: '销量'},
        ],
        left_body_one: [
            {
                code: '1',
                list: [
                    { linkurl: '', value: '红色/S2'},
                    { linkurl: '', value: '<p >100</p>' },
                ]
            },
            
        ],
    }



　　 let datalist = [];
    let left_header_data = [];
    let left_body_data = [];

    if(viewdata["data"+stateData.rowsaledetailtableflag] != undefined) {
        datalist = viewdata["data"+stateData.rowsaledetailtableflag]
        left_header_data = viewdata["left_header_"+stateData.rowsaledetailtableflag]
        left_body_data = viewdata["left_body_"+stateData.rowsaledetailtableflag]
    }

    let tablist = viewdata.tablist || [];
    let widthlist = viewdata.widthlist || [];

    function thWidth(val, defauleWidth) {
        if(val == '' || val == undefined || val == '0') {
            return defauleWidth;
        }else {
            return val + 'px';
        }
    }

　　 // 获取屏幕的宽度
    let allWidth = window.innerWidth;
    if(viewdata != null || viewdata != undefined) {
        let num = 0;
        widthlist.map(item => {
            num += parseInt(item.width);
        })

        let all_width = num;
        if(all_width <= window.innerWidth) {
            allWidth = window.innerWidth
        }else {
            allWidth = all_width;
        }
    }



    setTimeout(() => {
        if(document.getElementById('pubhead'+stateData.rowsaledetailtableflag) != null) {
            // 获取表头高度
            let he = document.getElementById('pubhead'+stateData.rowsaledetailtableflag).offsetHeight;
            // 获取表头宽度
            let wid = document.getElementById('pubhead1'+stateData.rowsaledetailtableflag).scrollWidth;
            // 获取内容body内容的高度
            let body_height = document.getElementById("bodyBox"+stateData.rowsaledetailtableflag).offsetHeight;

            let body_content = document.getElementById("bodyBox"+stateData.rowsaledetailtableflag);

            // 固定列的内容高度
            let left_body = document.getElementById("pobodyBox"+stateData.rowsaledetailtableflag);

            // 如果内容高度<300, box的高度 = 表头高度 + body内容的高度，反之最大不能超过300
            // 如果内容高度>300, body内容的高度 = 300 - 表头高度
            if(body_height < 300) {
                document.getElementById('box'+stateData.rowsaledetailtableflag).style.height = (he + body_height) + 'px'
                body_content.style.height=body_height+'px';
                left_body.style.height=body_height+'px';

            }else {
                document.getElementById('box'+stateData.rowsaledetailtableflag).style.height = '300px'
                body_content.style.height=(300-he)+'px';
                left_body.style.height=(300-he)+'px';
            }

            // body内容的宽度 = 表头的宽度
            body_content.style.width=wid+'px';
            body_content.style.marginTop=he+'px';
            body_content.style.overflowY='scroll';
            body_content.style.overflowX='hidden';

            // 定位表格
            document.getElementById('positionHeadertr').style.height = he-4 + 'px';
            left_body.style.marginTop=he+'px';
            left_body.style.overflowY='scroll';
            left_body.style.overflowX='hidden';
        }
    }, 200)

　　// 点击每个单元格跳转
    function currentTrRow(it) {
        if(it.linkurl != '') {
            console.log('准备跳转了')
        }
    }

    // 滚动的height
    function leftScroll(ty) {
        let left_scroll = document.getElementById('pobodyBox'+stateData.rowsaledetailtableflag);
        let right_scroll = document.getElementById('bodyBox'+stateData.rowsaledetailtableflag);
        if(ty == 'left') {
            right_scroll.scrollTop = left_scroll.scrollTop;
        }else {
            left_scroll.scrollTop = right_scroll.scrollTop;
        }
    }

    // 获取固定列的宽
    let pos_width = 0;
    if(left_header_data.length != 0) {
        left_header_data.map(item => {
            pos_width += parseInt(item.width)
        })
    }



function showDiv(data) {
        let showView = <div id={'box'+stateData.rowsaledetailtableflag} style={{position: 'relative'}}>  
                <div className={styles.tableBox} >
                    <table className={styles.tableHead} id={'pubhead'+stateData.rowsaledetailtableflag} style={{ allWidth + 'px'}}>
                        {
                            widthlist.map((it, wthind) => {
                                let defauleWidth = window.innerWidth / widthlist.length;    
                                return <colgroup key={wthind}>
                                        <col width={thWidth(it.width, defauleWidth)} />
                                    </colgroup>
                            })
                        }
                    
                        <thead id={'pubhead1'+stateData.rowsaledetailtableflag}>
                            <tr>
                                {
                                    widthlist.map((item, ind) => {
                                        return <th key={ind}>
                                                    <div style={{display: 'inline-block'}} dangerouslySetInnerHTML={{__html:item.title}}></div>
                                                    {/* {
                                                        item.imgflag == '1'
                                                        ? <img src={require('../../assets/huocar.png')} style={{height:12, marginLeft: '10px'}} />
                                                        : null
                                                    } */}
                                                </th>
                                    })
                                }
                            </tr>  
                        </thead>
                    </table>
                    <div className={styles.tableBodyBox} id={'bodyBox'+stateData.rowsaledetailtableflag} onScroll={leftScroll.bind(this, 'right')}>
                        <table className={styles.tableBody} style={{margin: 0, padding: 0}}>
                            {
                                widthlist.map((it, wthind) => {
                                    let defauleWidth = window.innerWidth / widthlist.length;    
                                    return <colgroup key={wthind}>
                                            <col width={thWidth(it.width, defauleWidth)} />
                                        </colgroup>
                                })
                            }
                            <tbody>
                                {
                                    datalist.map((item, trind) => {
                                        return <tr key={trind} >
                                            {
                                                item.list.map((it, tdind) => {
                                                    return <td key={tdind} onClick={ it.linkurl != '' ? currentTrRow.bind(this, it) : ''}>
                                                        <div style={{height: '100%', wordWrap:"break-word", }} dangerouslySetInnerHTML={{__html:it.value}}></div>
                                                    </td>
                                                })
                                            }
                                        </tr> 
                                    })
                                }
                                
                            </tbody>
                        </table>
                    </div>
                </div>

                <div className={styles.tableBox} style={{position: 'absolute', left: 0, top: 0,  (pos_width+6)+'px', boxShadow: '1px 0px 5px #EAEAEA'}}>
                    <table className={styles.tableHead}>
                        {
                            left_header_data.map((it, wthind) => {
                                return <colgroup key={wthind}>
                                        <col width={it.width} />
                                    </colgroup>
                            })
                        }
                    
                        <thead >
                            <tr id={'positionHeadertr'}>
                                {
                                    left_header_data.map((item, ind) => {
                                        return <th key={ind}>
                                                    <div style={{display: 'inline-block',  '100%'}} dangerouslySetInnerHTML={{__html:item.title}}></div>
                                                    {/* {
                                                        item.imgflag == '1'
                                                        ? <img src={require('../../assets/huocar.png')} style={{height:12, marginLeft: '10px'}} />
                                                        : null
                                                    } */}
                                                </th>
                                    })
                                }
                            </tr>  
                        </thead>
                    </table>
                    <div className={styles.tableBodyBox} id={'pobodyBox'+stateData.rowsaledetailtableflag} onScroll={leftScroll.bind(this, 'left')}>
                        <table className={styles.tableBody} style={{margin: 0, padding: 0}}>
                            {
                                left_header_data.map((it, wthind) => {
                                    return <colgroup key={wthind}>
                                            <col width={it.width} />
                                        </colgroup>
                                })
                            }
                            <tbody>
                                {
                                    left_body_data.map((item, trind) => {
                                        return <tr key={trind} >
                                            {
                                                item.list.map((it, tdind) => {
                                                    return <td key={tdind} onClick={currentTrRow.bind(this, it)}>
                                                        <div style={{height: '100%', wordWrap:"break-word", }} dangerouslySetInnerHTML={{__html:it.value}}></div>
                                                    </td>
                                                })
                                            }
                                        </tr> 
                                    })
                                }
                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        
        return showView;
    }

　　// 展示的html部分
　　<div>
　　　  {

   　　　　showDiv(datalist)
　　　　}　　
　　</div>