当前位置：首页 > VUE

vue表格宽度拖动实现

2026-01-22 21:08:17VUE

vue表格宽度拖动实现

在Vue中实现表格宽度拖动功能，可以通过监听鼠标事件并结合CSS样式调整来实现。以下是具体实现方法：

使用原生事件监听

创建一个可拖动的列分隔线，通过监听mousedown、mousemove和mouseup事件来调整列宽。

vue表格宽度拖动实现

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(col, index) in columns" :key="index">
          <div class="header-content">
            {{ col.title }}
            <div 
              class="resize-handle" 
              @mousedown="startResize(index, $event)"
            ></div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in data" :key="rowIndex">
        <td v-for="(col, colIndex) in columns" :key="colIndex">
          {{ row[col.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: 'Name', key: 'name', width: 200 },
        { title: 'Age', key: 'age', width: 100 },
        { title: 'Address', key: 'address', width: 300 }
      ],
      data: [
        { name: 'John', age: 25, address: 'New York' },
        { name: 'Jane', age: 30, address: 'London' }
      ],
      isResizing: false,
      currentColumnIndex: null,
      startX: 0,
      startWidth: 0
    };
  },
  methods: {
    startResize(index, event) {
      this.isResizing = true;
      this.currentColumnIndex = index;
      this.startX = event.clientX;
      this.startWidth = this.columns[index].width;

      document.addEventListener('mousemove', this.handleResize);
      document.addEventListener('mouseup', this.stopResize);
    },
    handleResize(event) {
      if (!this.isResizing) return;

      const deltaX = event.clientX - this.startX;
      const newWidth = this.startWidth + deltaX;

      if (newWidth > 50) { // 最小宽度限制
        this.columns[this.currentColumnIndex].width = newWidth;
      }
    },
    stopResize() {
      this.isResizing = false;
      document.removeEventListener('mousemove', this.handleResize);
      document.removeEventListener('mouseup', this.stopResize);
    }
  }
};
</script>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  position: relative;
}
.resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: #f0f0f0;
  cursor: col-resize;
}
.resize-handle:hover {
  background-color: #ccc;
}
.header-content {
  position: relative;
  padding-right: 5px;
}
</style>

使用第三方库

如果不想手动实现，可以使用现成的Vue表格组件库，如vxe-table或element-ui，它们内置了列宽拖动功能。

vue表格宽度拖动实现

vxe-table示例：

<template>
  <vxe-table :data="tableData">
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="Name" :resizable="true"></vxe-column>
    <vxe-column field="age" title="Age" :resizable="true"></vxe-column>
  </vxe-table>
</template>

<script>
import { VxeTable, VxeColumn } from 'vxe-table';

export default {
  components: { VxeTable, VxeColumn },
  data() {
    return {
      tableData: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 }
      ]
    };
  }
};
</script>

element-ui示例：

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="Name" width="180" resizable></el-table-column>
    <el-table-column prop="age" label="Age" width="180" resizable></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 }
      ]
    };
  }
};
</script>