vue实现调整表格宽度
实现表格宽度调整的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>注意事项
- 拖拽过程中需要考虑边界情况，如最小宽度限制
- 移动端需要添加触摸事件支持
- 性能优化：大量数据时考虑虚拟滚动
- 调整后的宽度建议保存到本地存储或后端
- 表头与表体列宽需要同步更新
以上方案可根据具体项目需求选择或组合使用。对于复杂场景，推荐使用成熟的表格组件库如Element UI、Ant Design Vue等内置的列宽调整功能。
