vxe-table 实现拖拽调整行高

在数据表格中，行高自适应内容虽常见，但有时用户希望手动调整行高以突出特定行、适应多行文本或优化打印布局。vxe-table 提供了拖拽调整行高的功能，用户可直接在表格界面上通过鼠标拖拽某列的下边框，实时改变任意行的高度，操作直观且无需额外编码。

说明

• 可视化拖拽：鼠标悬停至指定列的单元格底部边缘，出现调整手柄后按住拖动即可调整行高。
• 精细控制：每行独立调整，互不影响。
• 与列宽调整独立：行高调整与列宽调整（columnConfig.resizable）可同时启用，互不干扰。
• 零依赖：基于原生鼠标事件实现，无第三方库依赖。

代码

在表格的 rowConfig 中设置 resizable: true，并至少为一列添加 rowResize: true 属性（该列将作为拖拽手柄的锚点列）。

• 拖拽区域：将鼠标移动到启用了 rowResize: true 的列的单元格底部边框上（注意不是列头），鼠标指针会变为上下拖动形状。
• 调整行高：按住鼠标左键上下拖动，该行的高度会实时变化。
• 恢复默认：双击该行下边框可快速恢复默认行高（由内容自动撑开）。

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

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

const gridOptions = reactive({
  border: true,
  rowConfig: {
    resizable: true
  },
  columns: [
    { type: 'seq', width: 70, rowResize: true },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'time', title: 'Time' },
    { field: 'address', title: 'Address' }
  ],
  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	false	表格级别开关，控制是否允许调整行高（必须设置为 true）
column.rowResize	boolean	false	列级别开关，标记该列可以被用来拖拽调整行高（至少一列为 true）

vxetable.cn