vue列表拖动调整左右宽

<div
        class="box"
        style="width:100%;padding:18px 0;border-bottom: 1px solid #dcdfe6;display: flex;"
      >
        <div
          style="width:236px;"
          class="list-mail-address"
        >发件人</div>
        <div
          class="resizeAddress"
          style="width: 10px;cursor: pointer;"
        >
          ⋮
        </div>
        <div
          style="flex:1;"
          class="list-mail-subject"
        >
          主题
        </div>
        <div
          class="resizeSubject"
          style="width: 10px;cursor: pointer;"
        >
          ⋮
        </div>
        <div
          style="width:100px;"
          class="list-mail-size"
        >
          大小
        </div>
        <div
          class="resizeMailSize"
          style="width: 10px;cursor: pointer;"
        >
          ⋮
        </div>
        <div
          style="width:236px;"
          class="list-mail-time"
        >
          时间
        </div>
      </div>

  mounted() {
    this.dragControllerDiv()
  },
    methods: {
    dragControllerDiv() {
      const resizeAddress = document.getElementsByClassName('resizeAddress')
      const resizeSubject = document.getElementsByClassName('resizeSubject')
      const resizeSize = document.getElementsByClassName('resizeMailSize')
      const list_mail_address = document.getElementsByClassName('list-mail-address')
      const list_mail_subject = document.getElementsByClassName('list-mail-subject')
      const list_mail_size = document.getElementsByClassName('list-mail-size')
      const list_mail_time = document.getElementsByClassName('list-mail-time')
      const box = document.getElementsByClassName('box')
      // 发件人后方滑动
      for (let i = 0; i < resizeAddress.length; i++) {
        // 鼠标按下事件
        resizeAddress[i].onmousedown = function(e) {
          // 颜色改变提醒
          // resizeAddress[i].style.background = '#818181'
          const startX = e.clientX
          resizeAddress[i].left = resizeAddress[i].offsetLeft
          // 鼠标拖动事件
          document.onmousemove = function(e) {
            const sizeOffsetW = list_mail_size[i].offsetWidth
            const timeOffsetW = list_mail_time[i].offsetWidth
            const endX = e.clientX
            let moveLen = resizeAddress[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            const maxT = box[i].clientWidth - resizeAddress[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
            // 收件人最小宽度100，主题最小宽度150，10是拖拽的div宽
            const minT = 150 + sizeOffsetW + timeOffsetW + 10
            if (moveLen < 100) {
              moveLen = 100 // 左边区域的最小宽度为32px
              // 已调整至最小宽
            }
            // if (moveLen > maxT - 150) moveLen = maxT - 150 // 右边区域最小宽度为150px
            if (moveLen > maxT - minT) {
              moveLen = maxT - minT // 右边区域最小宽度为主题(150) + 大小时间宽
              // 已调整至最大宽
            }
            resizeAddress[i].style.left = moveLen // 设置左侧区域的宽度

            for (let j = 0; j < list_mail_address.length; j++) {
              list_mail_address[j].style.width = moveLen + 'px'
            }
            for (let j = 0; j < list_mail_subject.length; j++) {
              list_mail_subject[j].style.width = (box[i].clientWidth - moveLen - 10 - sizeOffsetW - timeOffsetW) + 'px'
            }
          }
          // 鼠标松开事件
          document.onmouseup = function(evt) {
            // 颜色恢复
            // resizeAddress[i].style.background = '#d6d6d6'
            document.onmousemove = null
            document.onmouseup = null
            resizeAddress[i].releaseCapture && resizeAddress[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resizeAddress[i].setCapture && resizeAddress[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
      // 主题后方滑动
      for (let i = 0; i < resizeSubject.length; i++) {
        // 鼠标按下事件
        resizeSubject[i].onmousedown = function(e) {
          // 颜色改变提醒
          // resizeSubject[i].style.background = '#818181'
          const startX = e.clientX
          resizeSubject[i].left = resizeSubject[i].offsetLeft
          // 鼠标拖动事件
          document.onmousemove = function(e) {
            const addressOffsetW = list_mail_address[i].offsetWidth
            const timeOffsetW = list_mail_time[i].offsetWidth
            const endX = e.clientX
            // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            let moveLen = resizeSubject[i].left + (endX - startX)
            // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
            const maxT = box[i].clientWidth - resizeSubject[i].offsetWidth
            // 主题最小宽度150，10是拖拽的div宽
            // 大小最小宽是60
            const minT = 60 + timeOffsetW // 右边区域最小宽度为大小(60) + 时间宽
            if (moveLen < (addressOffsetW + 150)) {
              moveLen = addressOffsetW + 150 // 左边区域的最小宽度为收件人+主题(150)
              // 已调整至最小宽
            }
            if (moveLen > maxT - minT) {
              moveLen = maxT - minT
              // 已调整至最大宽
            }
            resizeSubject[i].style.left = moveLen // 设置左侧区域的宽度

            for (let j = 0; j < list_mail_subject.length; j++) {
              list_mail_subject[j].style.width = moveLen + 'px'
            }
            for (let j = 0; j < list_mail_size.length; j++) {
              list_mail_size[j].style.width = (box[i].clientWidth - moveLen - 10 - timeOffsetW) + 'px'
            }
          }
          // 鼠标松开事件
          document.onmouseup = function(evt) {
            // 颜色恢复
            // resizeSubject[i].style.background = '#d6d6d6'
            document.onmousemove = null
            document.onmouseup = null
            resizeSubject[i].releaseCapture && resizeSubject[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resizeSubject[i].setCapture && resizeSubject[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
      // 大小后方滑动
      for (let i = 0; i < resizeSize.length; i++) {
        // 鼠标按下事件
        resizeSize[i].onmousedown = function(e) {
          // 颜色改变提醒
          // resizeSize[i].style.background = '#818181'
          const startX = e.clientX
          resizeSize[i].left = resizeSize[i].offsetLeft
          // 鼠标拖动事件
          document.onmousemove = function(e) {
            // const sizeOffsetW = list_mail_size[i].offsetWidth
            // const timeOffsetW = list_mail_time[i].offsetWidth
            const addressOffsetW = list_mail_address[i].offsetWidth
            const subjectW = list_mail_subject[i].offsetWidth
            const leftW = addressOffsetW + subjectW + 20
            const endX = e.clientX
            let moveLen = resizeSize[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            const maxT = box[i].clientWidth - resizeSize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
            // 收件人最小宽度100，主题最小宽度150，10是拖拽的div宽
            const minT = 100 + 10
            if (moveLen < (leftW + 60)) {
              moveLen = leftW + 60 // 左边区域的最小宽度为32px
              // 已调整至最小宽
            }
            // if (moveLen > maxT - 150) moveLen = maxT - 150 // 右边区域最小宽度为150px
            if (moveLen > maxT - minT) {
              moveLen = maxT - minT // 右边区域最小宽度为时间宽+拖拽
              // 已调整至最大宽
            }
            resizeSize[i].style.left = moveLen // 设置左侧区域的宽度

            for (let j = 0; j < list_mail_size.length; j++) {
              list_mail_size[j].style.width = (moveLen - leftW) + 'px'
            }
            for (let j = 0; j < list_mail_time.length; j++) {
              list_mail_time[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px'
            }
          }
          // 鼠标松开事件
          document.onmouseup = function(evt) {
            // 颜色恢复
            // resizeSize[i].style.background = '#d6d6d6'
            document.onmousemove = null
            document.onmouseup = null
            resizeSize[i].releaseCapture && resizeSize[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resizeSize[i].setCapture && resizeSize[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
    },
  },

• 页面中列表需要一起变宽度的class名一致

参考博客 www.cnblogs.com/Console-LIJ…

• 有列表查询数据，需要给列表重新赋值时，使用:style 结合width变量赋值宽
• 结合前面代码修改：

<!--发件人列为例-->
            <div
                class="banner-mail-tab-item-left list-mail-address"
                :style="addressStyle"
              >

data() {
    return {
      addressW: '236px',
      addressStyle: {},
      sizeW: '100px',
      sizeStyle: {},
      timeW: '236px',
      timeStyle: {},
    }

 mounted() {
    this.dragControllerDiv()
  },
  methods: {
    dragControllerDiv() {
      const resizeAddress = document.getElementsByClassName('resizeAddress')
      const resizeSubject = document.getElementsByClassName('resizeSubject')
      const resizeSize = document.getElementsByClassName('resizeMailSize')
      const list_mail_address = document.getElementsByClassName('list-mail-address')
      const list_mail_subject = document.getElementsByClassName('list-mail-subject')
      const list_mail_size = document.getElementsByClassName('list-mail-size')
      const list_mail_time = document.getElementsByClassName('list-mail-time')
      const box = document.getElementsByClassName('box')
      const that = this
      // 收件人后方滑动
      for (let i = 0; i < resizeAddress.length; i++) {
        // 鼠标按下事件
        resizeAddress[i].onmousedown = function(e) {
          // 颜色改变提醒
          // resizeAddress[i].style.background = '#818181'
          const startX = e.clientX
          resizeAddress[i].left = resizeAddress[i].offsetLeft
          // 鼠标拖动事件
          document.onmousemove = function(e) {
            const sizeOffsetW = list_mail_size[i].offsetWidth
            const timeOffsetW = list_mail_time[i].offsetWidth
            const endX = e.clientX
            let moveLen = resizeAddress[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            const maxT = box[i].clientWidth - resizeAddress[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
            // 收件人最小宽度100，主题最小宽度150，10是拖拽的div宽
            const minT = 150 + sizeOffsetW + timeOffsetW + 10
            if (moveLen < 100) {
              moveLen = 100 // 左边区域的最小宽度为32px
              // 已调整至最小宽
            }
            // if (moveLen > maxT - 150) moveLen = maxT - 150 // 右边区域最小宽度为150px
            if (moveLen > maxT - minT) {
              moveLen = maxT - minT // 右边区域最小宽度为主题(150) + 大小时间宽
              // 已调整至最大宽
            }
            resizeAddress[i].style.left = moveLen // 设置左侧区域的宽度
            that.addressW = moveLen + 'px'
            that.sizeW = sizeOffsetW + 'px'
            that.timeW = timeOffsetW + 'px'
            for (let j = 0; j < list_mail_address.length; j++) {
              list_mail_address[j].style.width = moveLen + 'px'
            }
            for (let j = 0; j < list_mail_subject.length; j++) {
              list_mail_subject[j].style.width = (box[i].clientWidth - moveLen - 10 - sizeOffsetW - timeOffsetW) + 'px'
            }
          }
          // 鼠标松开事件
          document.onmouseup = function(evt) {
            // 颜色恢复
            // resizeAddress[i].style.background = '#d6d6d6'
            document.onmousemove = null
            document.onmouseup = null
            resizeAddress[i].releaseCapture && resizeAddress[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resizeAddress[i].setCapture && resizeAddress[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
      // 主题后方滑动
      for (let i = 0; i < resizeSubject.length; i++) {
        // 鼠标按下事件
        resizeSubject[i].onmousedown = function(e) {
          // 颜色改变提醒
          // resizeSubject[i].style.background = '#818181'
          const startX = e.clientX
          resizeSubject[i].left = resizeSubject[i].offsetLeft
          // 鼠标拖动事件
          document.onmousemove = function(e) {
            const addressOffsetW = list_mail_address[i].offsetWidth
            const timeOffsetW = list_mail_time[i].offsetWidth
            const endX = e.clientX
            // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            let moveLen = resizeSubject[i].left + (endX - startX)
            // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
            const maxT = box[i].clientWidth - resizeSubject[i].offsetWidth
            // 主题最小宽度150，10是拖拽的div宽
            // 大小最小宽是60
            const minT = 60 + timeOffsetW // 右边区域最小宽度为大小(60) + 时间宽
            if (moveLen < (addressOffsetW + 150)) {
              moveLen = addressOffsetW + 150 // 左边区域的最小宽度为收件人+主题(150)
              // 已调整至最小宽
            }
            if (moveLen > maxT - minT) {
              moveLen = maxT - minT
              // 已调整至最大宽
            }
            resizeSubject[i].style.left = moveLen // 设置左侧区域的宽度
            that.addressW = addressOffsetW + 'px'
            that.sizeW = (box[i].clientWidth - moveLen - 10 - timeOffsetW) + 'px'
            that.timeW = timeOffsetW + 'px'
            for (let j = 0; j < list_mail_subject.length; j++) {
              list_mail_subject[j].style.width = moveLen + 'px'
            }
            for (let j = 0; j < list_mail_size.length; j++) {
              list_mail_size[j].style.width = (box[i].clientWidth - moveLen - 10 - timeOffsetW) + 'px'
            }
          }
          // 鼠标松开事件
          document.onmouseup = function(evt) {
            // 颜色恢复
            resizeSubject[i].style.background = '#d6d6d6'
            document.onmousemove = null
            document.onmouseup = null
            resizeSubject[i].releaseCapture && resizeSubject[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resizeSubject[i].setCapture && resizeSubject[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
      // 大小后方滑动
      for (let i = 0; i < resizeSize.length; i++) {
        // 鼠标按下事件
        resizeSize[i].onmousedown = function(e) {
          // 颜色改变提醒
          // resizeSize[i].style.background = '#818181'
          const startX = e.clientX
          resizeSize[i].left = resizeSize[i].offsetLeft
          // 鼠标拖动事件
          document.onmousemove = function(e) {
            // const sizeOffsetW = list_mail_size[i].offsetWidth
            // const timeOffsetW = list_mail_time[i].offsetWidth
            const addressOffsetW = list_mail_address[i].offsetWidth
            const subjectW = list_mail_subject[i].offsetWidth
            const leftW = addressOffsetW + subjectW + 20
            const endX = e.clientX
            let moveLen = resizeSize[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            const maxT = box[i].clientWidth - resizeSize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
            // 收件人最小宽度100，主题最小宽度150，10是拖拽的div宽
            const minT = 100 + 10
            if (moveLen < (leftW + 60)) {
              moveLen = leftW + 60 // 左边区域的最小宽度为32px
              // 已调整至最小宽
            }
            // if (moveLen > maxT - 150) moveLen = maxT - 150 // 右边区域最小宽度为150px
            if (moveLen > maxT - minT) {
              moveLen = maxT - minT // 右边区域最小宽度为时间宽+拖拽
              // 已调整至最大宽
            }
            resizeSize[i].style.left = moveLen // 设置左侧区域的宽度
            that.addressW = addressOffsetW + 'px'
            that.sizeW = (moveLen - leftW) + 'px'
            that.timeW = (box[i].clientWidth - moveLen - 10) + 'px'
            for (let j = 0; j < list_mail_size.length; j++) {
              list_mail_size[j].style.width = (moveLen - leftW) + 'px'
            }
            for (let j = 0; j < list_mail_time.length; j++) {
              list_mail_time[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px'
            }
          }
          // 鼠标松开事件
          document.onmouseup = function(evt) {
            // 颜色恢复
            resizeSize[i].style.background = '#d6d6d6'
            document.onmousemove = null
            document.onmouseup = null
            resizeSize[i].releaseCapture && resizeSize[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resizeSize[i].setCapture && resizeSize[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
    },
  },

列表数据赋值时，给style赋值

// this.mail_list = list 列表数据赋值时，给style赋值
this.addressStyle = { 'width': this.addressW }
this.sizeStyle = { 'width': this.sizeW }
this.timeStyle = { 'width': this.timeW }