实现效果：
实现代码：
//最外边的这个是放表格容器的div<div @mousemove="shrinkMove" @mouseup="shrinkUp">//划重点：id = "resizetable"--用这个id标识修改哪个容器的宽度<div id = "resizetable">左边表格的div</div><div @mousedown="shrinkDown">图上拖动条的div</div></div>//只写了重要代码data() {return {isShrink: false, // 控制是否改变宽度}}methods: {shrinkMove(e) {document.onselectstart = function() {return false } // 解决拖动会选中文字的问题if (this.isShrink) {//e.screenX，鼠标的x坐标，设置最小最大宽度以及误差值根据项目需要决定const wid = e.screenX - 25 // 误差值//划重点：id = "resizetable"--用这个id标识修改哪个容器的宽度var resizetable = document.getElementById('resizetable')if (wid < 520) {resizetable.style.width = 520 + 'px' //最小值} else if (this.miningAreaMap.size === 0 && wid > 690) {resizetable.style.width = 690 + 'px' //正常时最大值} else if (this.miningAreaMap.size > 0 && wid > 820) {resizetable.style.width = 820 + 'px' //数据多一列时可拖动的最大值} else {resizetable.style.width = wid + 'px' //拖动时的宽度}}},shrinkDown(e) {document.onselectstart = function() {return false } // 解决拖动会选中文字的问题this.isShrink = true},shrinkUp(e) {document.onselectstart = function() {return false } // 解决拖动会选中文字的问题this.isShrink = false},}
