vxe-table 列宽与行高拖拽调整：让表格布局极其灵活，拖拽功能非常强大

在数据表格应用中，允许用户通过拖拽调整列宽和行高是提升交互体验的重要功能。vxe-table 提供了简洁的配置项来启用这两项能力，让表格布局更加灵活。

配置说明

配置项	类型	说明
columnConfig.resizable	Boolean	设为 true 后，所有列均可通过拖拽调整宽度。
column.minWidth	Number	可选，限制最小宽度，避免拖拽过窄。
column.maxWidth	Number	可选，限制最大宽度。

列宽拖拽调整

通过设置 columnConfig.resizable = true，即可启用列宽拖拽功能。用户将鼠标移动到列边框时，光标会变为拖拽样式，按住拖拽即可调整该列的宽度。

html 复制代码

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  columnConfig: {
    resizable: true
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: '最小宽', width: 500 },
    { field: 'role', title: 'Role', width: 400 },
    { field: 'sex', title: 'Sex', width: 300 },
    { field: 'age', title: 'Age', width: 600 },
    { field: 'address', title: 'Address', width: 400 }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

配置说明

配置项	类型	说明
rowConfig.resizable	Boolean	设为 true 后，所有行均可通过拖拽调整高度。
column.rowResize	Boolean	指定该列作为拖拽把手，用户需要拖拽该列所在的行边框。通常设置在第一列（如序号列）。

行高拖拽调整

通过设置 rowConfig.resizable = true 启用行高拖拽功能。用户将鼠标移动到行边框时，同样会出现拖拽光标，按住拖拽即可调整该行的高度。同时支持高性能的虚拟渲染，秒级渲染万级数据

html 复制代码

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  height: 400,
  rowConfig: {
    resizable: true
  },
  columns: [
    { type: 'seq', width: 70, rowResize: true },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'test abc' },
    { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 45, address: 'Shanghai' },
    { id: 10006, name: 'Test6', role: 'Test', sex: 'Man', age: 56, address: 'Guangzhou' },
    { id: 10007, name: 'Test7', role: 'PM', sex: 'Man', age: 38, address: 'Guangzhou' },
    { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 39, address: 'Guangzhou' },
    { id: 10009, name: 'Test9', role: 'Develop', sex: 'Women', age: 24, address: 'Shanghai' },
    { id: 10010, name: 'Test10', role: 'Test', sex: 'Women', age: 34, address: 'test abc' }
  ]
})
</script>

最佳实践

功能	注意事项
列宽拖拽	1. 如果列设置了 minWidth / maxWidth，拖拽范围会自动受限于该区间。2. 固定列（fixed）与非固定列之间的拖拽行为可能存在边缘情况，建议固定列数量不要过多。3. 列宽调整后，可通过 column-config.minWidth 全局限制最小宽度，避免过窄导致内容不可读。
行高拖拽	1. 行高拖拽适合数据量较小的表格；对于大数据量，建议使用虚拟滚动 + setRowHeight 动态控制，而不是让用户逐行拖拽。2. 如果启用了虚拟滚动（virtualYConfig.enabled），行高拖拽可能会与虚拟滚动的固定行高冲突，此时应使用 setRowHeight 方法替代。3. 行高拖拽的"把手"通常只设置在一列（例如序号列），避免多列都出现拖拽光标造成混淆。
性能	配合虚拟滚动，高性能的拖拽，即使是海量数据，拖拽依然丝滑流畅。

vxe-table 通过极简的配置（columnConfig.resizable 和 rowConfig.resizable）为用户提供了直观的列宽、行高拖拽调整能力。这两项功能极大地增强了表格的交互友好性，让用户可以根据实际内容自由调整表格布局。

vxetable.cn