告别繁琐，Vue3+ElementPlus实现Table列宽调整和拖拽！

在 Vue 3 中使用 Sortable.js 增强 ElementPlus Table 组件

ElementPlus Table 组件是一款强大的数据展示工具，但它默认不支持列宽调整和列拖拽。不过，借助 Sortable.js，我们可以轻松实现这些功能，提升表格的交互性和灵活性。

前置准备

• 安装 Sortable.js 依赖项：npm install vue sortablejs --save
• 在 main.js 中引入 Sortable.js：

import Vue from 'vue'
import Sortable from 'sortablejs'

Vue.use(Sortable)

实现列宽调整

<el-table :data="tableData" sortable>
  <el-table-column prop="name" label="姓名" width="100px"></el-table-column>
  <el-table-column prop="age" label="年龄" width="100px"></el-table-column>
  <el-table-column prop="address" label="地址" width="200px"></el-table-column>
</el-table>

只需在 Table 组件上添加 sortable 属性，即可启用列宽调整。拖拽列头即可调整列宽。

实现列拖拽

<el-table :data="tableData" sortable>
  <el-table-column prop="name" label="姓名" draggable width="100px"></el-table-column>
  <el-table-column prop="age" label="年龄" draggable width="100px"></el-table-column>
  <el-table-column prop="address" label="地址" draggable width="200px"></el-table-column>
</el-table>

与列宽调整类似，只需要在 el-table-column 上添加 draggable 属性，即可启用列拖拽。拖拽列头即可调整列的顺序。

常见问题解答

1. 如何禁用列宽调整或列拖拽？

移除 sortable 或 draggable 属性即可禁用相应功能。

2. 如何设置列的最小和最大宽度？

可以使用 minWidth 和 maxWidth 属性来设置列的最小和最大宽度。

3. 如何在列宽调整后更新数据源？

监听 update:sort 事件并更新数据源，例如：

<el-table :data="tableData" @update:sort="handleSortUpdate">
</el-table>

4. 如何监听列拖拽后的顺序变化？

监听 sort 事件并获取新顺序，例如：

<el-table :data="tableData" @sort="handleSort">
</el-table>

5. 如何在使用 ElementPlus 和 Sortable.js 时解决冲突？

确保在 Sortable.js 之后引入 ElementPlus，例如：

import ElementPlus from 'element-plus'
import Sortable from 'sortablejs'

app.use(ElementPlus)
app.use(Sortable)

结语

通过使用 Sortable.js，我们能够轻松为 ElementPlus Table 组件添加列宽调整和列拖拽功能，使其更加灵活和易于使用。这些功能可以大大提高数据展示的交互性和可用性，满足各种业务场景的需求。