表头拉伸和分栏拉伸方案-526互联

1. 纯css极简版

resize: horizontal;

缺点: 只能在右下角很小的范围显示拉伸鼠标，且样式范围反斜线

2. 纯css美化版

//隐藏掉反斜线
.container::-webkit-resizer  {
    background: transparent;
}

3. 纯CSS复杂版

纯CSS实现分栏宽度拉伸调整

4. js实现表头拉伸，分栏同样有效

function init(){
    let thead = document.querySelector('.ant-table-thead');
    console.log('thead: ', thead);
    let ths = thead.querySelectorAll('th');
    console.log('ths: ', ths);
    ths.forEach(t => {
        t.style.position = 'relative';
        t.insertAdjacentHTML('beforeend', '<i style="position:absolute;right:0;top:0;height:50px;width:30px;background:lightblue;cursor:ew-resize;"></i>');
    })

    thead.addEventListener('mousedown', onMousedown);

    let curI = null;

    function onMousedown(e){
        console.log('mousedown: ', e);
        if(e.target.nodeName.toLowerCase() == 'i'){
            let i = e.target;
            i.setAttribute('data-x', e.clientX);
            i.setAttribute('data-w', i.parentNode.offsetWidth);
            curI = i;
            document.addEventListener('mousemove', onMousemove);
            document.addEventListener('mouseup', onMouseup);
        }
    }
    
    function onMousemove(e){
        let i = curI;
        let offsetx = e.clientX - i.getAttribute('data-x');
        console.log('e.clientX: ', e.clientX, 'data-x: ', i.getAttribute('data-x'));
        i.parentNode.style.width = parseInt(i.getAttribute('data-w')) + offsetx + 'px';
    }
    
    function onMouseup(e){
        document.removeEventListener('mousemove', onMousemove);
        document.removeEventListener('mouseup', onMouseup);
    }
}