1. 纯css极简版
resize: horizontal;
缺点: 只能在右下角很小的范围显示拉伸鼠标,且样式范围反斜线
2. 纯css美化版
//隐藏掉反斜线 .container::-webkit-resizer { background: transparent; }
3. 纯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', onm ousedown); let curI = null; function onm ousedown(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', onm ousemove); document.addEventListener('mouseup', onm ouseup); } } function onm ousemove(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 onm ouseup(e){ document.removeEventListener('mousemove', onm ousemove); document.removeEventListener('mouseup', onm ouseup); } }
标签:拉伸,document,表头,let,分栏,data,thead From: https://www.cnblogs.com/mengff/p/17935252.html