vue表格宽度拖动实现

Vue 表格宽度拖动实现

实现表格列宽拖动的核心思路是通过监听鼠标事件，动态调整列宽。以下是基于 Vue 的实现方法：

使用原生事件监听

在表格列头添加可拖动的分隔线，通过鼠标事件计算宽度变化：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(col, index) in columns" :key="index" :style="{ width: col.width + 'px' }">
          {{ col.title }}
          <div class="resize-handle" @mousedown="startResize(index, $event)"></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '列1', width: 100 },
        { title: '列2', width: 150 }
      ],
      isResizing: false,
      currentColIndex: null,
      startX: 0,
      startWidth: 0
    }
  },
  methods: {
    startResize(index, e) {
      this.isResizing = true
      this.currentColIndex = index
      this.startX = e.clientX
      this.startWidth = this.columns[index].width

      document.addEventListener('mousemove', this.handleResize)
      document.addEventListener('mouseup', this.stopResize)
    },
    handleResize(e) {
      if (!this.isResizing) return
      const dx = e.clientX - this.startX
      this.columns[this.currentColIndex].width = this.startWidth + dx
    },
    stopResize() {
      this.isResizing = false
      document.removeEventListener('mousemove', this.handleResize)
      document.removeEventListener('mouseup', this.stopResize)
    }
  }
}
</script>

<style>
.resize-handle {
  width: 5px;
  height: 100%;
  background: #ccc;
  cursor: col-resize;
  position: absolute;
  right: 0;
  top: 0;
}
th {
  position: relative;
}
</style>

使用第三方库

对于复杂需求，可以使用现成的表格组件库：

1. Element UI：el-table 自带列宽拖动功能
2. VxeTable：提供更灵活的列宽调整配置
3. AG Grid：企业级表格解决方案

以 Element UI 为例：

<el-table :data="tableData" border>
  <el-table-column prop="name" label="姓名" width="180" resizable></el-table-column>
  <el-table-column prop="age" label="年龄" width="100" resizable></el-table-column>
</el-table>

注意事项

1. 拖动过程中应限制最小宽度，避免列宽过小
2. 考虑性能优化，避免频繁触发样式计算
3. 移动端需要额外处理触摸事件
4. 复杂表头结构需要特殊处理拖动逻辑

完整示例优化

添加边界处理和样式优化：

handleResize(e) {
  if (!this.isResizing) return
  const dx = e.clientX - this.startX
  const newWidth = Math.max(50, this.startWidth + dx) // 最小50px
  this.$set(this.columns, this.currentColIndex, {
    ...this.columns[this.currentColIndex],
    width: newWidth
  })
}

通过以上方法可以实现灵活的表格列宽拖动功能，根据项目需求选择适合的实现方案。