当前位置：首页 > VUE

vue实现调整表格宽度

2026-01-20 11:19:32VUE

实现表格宽度调整的Vue方案

使用v-resizable指令

安装依赖库vue-resizable：

npm install vue-resizable --save

注册指令并应用于表格列：

<template>
  <table>
    <tr>
      <th v-resizable>列1</th>
      <th v-resizable>列2</th>
    </tr>
  </table>
</template>

<script>
import VueResizable from 'vue-resizable'
Vue.use(VueResizable)
</script>

自定义拖拽调整实现

创建可拖拽的列分隔线组件：

<template>
  <div class="resizable-table">
    <table>
      <colgroup>
        <col v-for="(width, index) in colWidths" :key="index" :style="{ width: width + 'px' }">
      </colgroup>
      <thead>
        <tr>
          <th v-for="(col, index) in columns" :key="index">
            {{ col.title }}
            <div class="resizer" @mousedown="startResize(index)"></div>
          </th>
        </tr>
      </thead>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colWidths: [100, 200, 150],
      columns: [
        { title: '姓名' },
        { title: '年龄' },
        { title: '地址' }
      ],
      isResizing: false,
      currentCol: null,
      startX: 0,
      startWidth: 0
    }
  },
  methods: {
    startResize(index) {
      this.isResizing = true
      this.currentCol = index
      document.addEventListener('mousemove', this.handleResize)
      document.addEventListener('mouseup', this.stopResize)
    },
    handleResize(e) {
      if (this.isResizing) {
        const newWidth = this.startWidth + e.clientX - this.startX
        this.$set(this.colWidths, this.currentCol, newWidth)
      }
    },
    stopResize() {
      this.isResizing = false
      document.removeEventListener('mousemove', this.handleResize)
      document.removeEventListener('mouseup', this.stopResize)
    }
  }
}
</script>

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

使用第三方表格组件

Element UI表格列宽调整示例：

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 }
      ]
    }
  }
}
</script>

CSS flex布局方案

使用CSS实现响应式表格宽度：

<template>
  <div class="flex-table">
    <div class="header">
      <div class="cell" v-for="col in columns" :key="col.key">
        {{ col.title }}
        <div class="resizer" @mousedown="startResize(col.key)"></div>
      </div>
    </div>
  </div>
</template>

<style>
.flex-table {
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
}
.cell {
  flex: 1 1 0%;
  position: relative;
  min-width: 100px;
}
</style>