vue 使用 sortable 实现 el-table 拖拽排序功能
本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能，具体内容如下所示： npm 下载： npm install sortablejs --save 引入： import Sortable from "sortablejs"; 代码： <template> <div class="table"> <el-table ref="dragTable" :data="tableData" border :row-class-name="tableRowClassName">
在Vue.js应用中，实现`el-table`组件的拖拽排序功能可以借助第三方库`sortablejs`。`sortablejs`是一个轻量级的JavaScript库，它允许用户通过鼠标或触摸事件对HTML元素进行拖放排序。以下是使用`sortablejs`在Vue中实现`el-table`拖拽排序的详细步骤：
确保已经安装了`sortablejs`库。可以通过npm来安装：
```bash
npm install sortablejs --save
```
接下来，在Vue组件中引入`sortablejs`：
```javascript
import Sortable from "sortablejs";
```
在模板部分，创建一个包含`el-table`的`div`元素，并为其绑定数据和一个自定义的`row-class-name`属性，以便我们可以为不可拖动的行设置特定的类：
```html
<template>
<div class="table">
<el-table ref="dragTable" :data="tableData" border :row-class-name="tableRowClassName">
<!-- 表格列定义 -->
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button class="move" type="text" size="small">拖拽</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
```
在数据部分，定义表格的数据，包括一些具有`disabled`属性的项，这些项将被标记为不可拖动：
```javascript
data() {
return {
tableData: [
{ id: "1", name: "text_1", date: "1111-11-11", address: "测试_1" },
{ id: "2", name: "text_2_不可拖拽", date: "2222-22-22", address: "测试_2_不可拖拽", disabled: true },
{ id: "3", name: "text_3", date: "3333-33-33", address: "测试_3" },
{ id: "4", name: "text_4", date: "4444-44-44", address: "测试_4" },
{ id: "5", name: "text_5", date: "5555-55-55", address: "测试_5" },
],
};
},
```
在方法部分，我们需要创建一个`initSortable`函数来初始化`sortablejs`实例。这个函数会获取`el-table`的`tbody`元素，并创建一个拖拽实例。这里我们设置了动画效果、拖拽触发的目标、不可拖动的类名以及拖拽过程中的样式类名：
```javascript
methods: {
initSortable() {
const ele = this.$refs.dragTable.$el.querySelector(".el-table__body > tbody");
let dragTable = Sortable.create(ele, {
animation: 150, // 动画效果
handle: ".move", // 只有点击带有'move'类的按钮时才能触发拖拽
filter: ".disabled", // 不可拖动的行
dragClass: "dragClass", // 拖拽时元素的样式类
ghostClass: "ghostClass", // 拖拽时悬浮元素的样式类
chosenClass: "chosenClass", // 选中状态的样式类
// 监听拖拽事件
onStart: () => {
console.log("开始拖动");
},
onEnd: (e) => {
console.log(`结束拖动`, `拖动前索引${e.oldIndex}---拖动后索引${e.newIndex}`);
// 在拖放结束后更新数据源
const item = this.tableData.splice(e.oldIndex, 1)[0];
this.tableData.splice(e.newIndex, 0, item);
},
});
},
// 为表格行设置class
tableRowClassName({ row }) {
if (row.disabled) {
return "disabled";
}
return "";
},
},
```
在Vue组件的生命周期钩子中调用`initSortable`，确保在表格渲染完成后初始化拖拽功能：
```javascript
mounted() {
this.initSortable();
}
```
通过以上步骤，我们成功地在Vue的`el-table`组件中实现了基于`sortablejs`的拖拽排序功能。拖动表行时，`onEnd`事件会捕获旧的索引和新的索引，并根据这些信息更新数据源，以保持视图与数据同步。同时，通过`disabled`属性和`row-class-name`，我们可以控制某些行不可拖动，提供更好的用户体验。
