vue通过拖拉拽动态改变vxe-table高度(项目实战)

前言
  

如上图所示，如果我们需要订单列表和订单信息可以上下拖动，调整界面大小，订单列表向下拖动 订单列表显示的界面变大，订单信息向上拖动，订单信息界面显示变大。通过拖拽来动态的改变表格高度及下面内容的高度。

方案实现

         <div ref="draggableContainer" class="draggable-container">
           <div ref="draggableArea" class="draggable-area">
             <div class="content">
          <vxe-table :id="tableId" ref="tableRef1"
                     :height="tableHeight" size="mini" stripe resizable border
              >
          </vxe-table>
            </div>
            <div ref="handle" class="drag-handle"></div>
          </div>
           <div>
             此处为表格下面的内容，根据自己业务需求来写
           </div>
         </div>

首先我们定义一下表格的高度通过变量实现。

handle定义的是拖动条，是需要跟着表格一起走的。

const draggableArea = ref(null);
const handle = ref(null);
const dragging = ref(false);
const startY = ref(0);
const startHeight = ref(0);
const tableHeight = ref(400);

这里是我们需要用到的全部变量。

const startDrag = (event) => {
  dragging.value = true;
  startY.value = event.clientY;
  startHeight.value = draggableArea.value.offsetHeight;
  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', endDrag);
};
onMounted(() => {
  // 确保组件已经挂载到 DOM 中
  if (draggableArea.value && handle.value) {
    handle.value.addEventListener('mousedown', startDrag);
  }
});

 获取最开始的数据，监听拖拽事件。这里必须注意要在mounted里面监听,created是获取不到dom的,新手要及其注意这一点,然后大的要来了，前方高能！！！

const drag = (event) => {
  if (!dragging.value) return;
  const delta = event.clientY - startY.value;
  draggableArea.value.style.height = `${startHeight.value + delta}px`;
  tableHeight.value = `${startHeight.value + delta-30}px`
};
const endDrag = () => {
  dragging.value = false;
  document.removeEventListener('mousemove', drag);
  document.removeEventListener('mouseup', endDrag);
};

对于表格的取值根据实际情况来动态增减。最后的步骤也不能忘记

onUnmounted(() => {
  // 组件卸载时，移除事件监听器
  if (draggableArea.value && handle.value) {
    handle.value.removeEventListener('mousedown', startDrag);
  }
});

然后是样式部分，这里就不多说了直接上代码

.draggable-container {
  position: relative;
  width: 100%;
}

.draggable-area {
  position: relative;
  min-height: 175px;
}

.content {
  padding: 16px;
}

.drag-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  background-color: #ddd;
  cursor: ns-resize;
}

完成以上步骤妹问题的话应该就没问题了---嘿嘿(随便拖，流畅度拉满）