本文將介紹如何在使用 Element UI 的 Vue 應(yīng)用中，結(jié)合 SortableJS 庫(kù)，為 el-table 組件添加拖拽排序功能。
在開始之前，確保你的項(xiàng)目中已經(jīng)安裝了 Element UI 和 SortableJS。如果尚未安裝，可以通過以下命令進(jìn)行安裝：
npm install element-ui sortablejs實(shí)現(xiàn)步驟
第一步：創(chuàng)建基礎(chǔ)表格
首先，我們需要一個(gè)基本的 el-table。這個(gè)表格將展示一些可排序的數(shù)據(jù)。下面是一個(gè)簡(jiǎn)單的表格示例：
第二步：引入 SortableJS 并初始化
接下來，我們需要通過 SortableJS 使 el-table 的行變得可拖拽。這需要在 Vue 組件的 mounted 鉤子中完成：
import Sortable from 'sortablejs';
export default {
mounted() {
this.initSortable();
},
methods: {
initSortable() {
const el = this.$refs.myTable.$el.querySelector('.el-table__body-wrapper tbody');
Sortable.create(el, {
handle: '.drag-handle',
animation: 150,
onEnd: this.handleDragEnd,
});
},
handleDragEnd(evt) {
// 拖拽結(jié)束后的處理邏輯
},
},
};在這個(gè)例子中，我們通過查詢選擇器找到 el-table 的 tbody 元素，并對(duì)它應(yīng)用 Sortable.create 方法使其成為可拖拽的。我們還定義了 handleDragEnd 方法來處理拖拽結(jié)束后的邏輯，例如更新數(shù)據(jù)順序。
第三步：更新數(shù)據(jù)順序
拖拽結(jié)束后，我們需要根據(jù)拖拽結(jié)果更新表格數(shù)據(jù)的順序。這可以通過修改 handleDragEnd 方法來實(shí)現(xiàn)：
handleDragEnd(evt) {
const { oldIndex, newIndex } = evt;
const movedItem = this.tableData.splice(oldIndex, 1)[0];
this.tableData.splice(newIndex, 0, movedItem);
}在這里，我們使用 splice 方法從數(shù)組中移除被拖拽的項(xiàng)，并將其插入到新的位置。
第四步：添加拖拽把手
為了提高用戶體驗(yàn)，我們可以為每一行添加一個(gè)拖拽把手，讓用戶知道哪里可以拖拽。這可以通過添加一個(gè)新的 el-table-column 來實(shí)現(xiàn)：
