elementUi 表格：拖拽修改列宽行高，让你告别列宽限制！

2023-03-02 08:28:10

利用第三方库实现 Element UI el-table 的列宽动态拖拽

在使用 Element UI 的 el-table 组件时，调整列宽以适应不同的数据内容是一项常见的需求。然而，el-table 组件默认不支持列宽动态拖拽功能，给我们的操作带来了不便。为了解决这个问题，我们可以借助第三方库来实现列宽动态拖拽功能。

使用 Vue-table-dnd 库

众多第三方库中，我推荐使用 Vue-table-dnd 库。它的优势在于：

安装简便，使用方便： 只需几行代码即可安装和使用。
支持多种拖拽模式： 提供多种拖拽模式，包括行内拖拽、列内拖拽和全局拖拽。
支持自定义拖拽样式： 允许用户自定义拖拽元素的样式，以满足不同的设计需求。

实现动态拖拽步骤

1. 安装 Vue-table-dnd 库

npm install vue-table-dnd --save

2. 在 main.js 中引入 Vue-table-dnd 库

import VueTableDnd from 'vue-table-dnd'

Vue.use(VueTableDnd)

3. 在 el-table 组件中使用 Vue-table-dnd

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" :resizable="true" />
  <el-table-column prop="age" label="年龄" :resizable="true" />
  <el-table-column prop="address" label="地址" :resizable="true" />
</el-table>

通过以上步骤，即可在 el-table 组件中实现列宽动态拖拽功能。

使用注意事项

在 el-table 组件上设置 style="width: 100%"，否则拖拽功能无法正常工作。
在 el-table-column 组件上设置 :resizable="true"，否则列宽无法拖拽。
若需自定义拖拽样式，可分别在 el-table-column 组件上设置 :draggable="true" 和 :drag-class="my-drag-class"，然后在样式文件中定义 .my-drag-class 样式。