npm 下載：

npm install sortablejs --save

引入：

import Sortable from "sortablejs";

程式碼：

<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>
  <el-button class="move" type="text" size="small">拖 拽</el-button>
 </template>
 </el-table-column>
 </el-table>
 </div>
</template>
<script>
import Sortable from "sortablejs";
export default {
 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",],};
 },methods: {
 // 建立sortable例項
 initSortable() {
 // 獲取表格row的父節點
 const ele = this.$refs.dragTable.$el.querySelector(
 ".el-table__body > tbody"
 );
 // 建立拖拽例項
 let dragTable = Sortable.create(ele,{
 animation: 150,//動畫
 handle: ".move",//指定拖拽目標，點選此目標才可拖拽元素(此例中設定操作按鈕拖拽)
 filter: ".disabled",//指定不可拖動的類名（el-table中可通過row-class-name設定行的class）
 dragClass: "dragClass",//設定拖拽樣式類名
 ghostClass: "ghostClass",//設定拖拽停靠樣式類名
 chosenClass: "chosenClass",//設定選中樣式類名
 // 開始拖動事件
 onStart: () => {
  console.log("開始拖動");
 },// 結束拖動事件
 onEnd: (e) => {
  console.log(
  "結束拖動",`拖動前索引${e.oldIndex}---拖動後索引${e.newIndex}`
  );
 },});
 },// 設定表格row的class
 tableRowClassName({ row }) {
 if (row.disabled) {
 return "disabled";
 }
 return "";
 },mounted() {
 this.initSortable();
 },};
</script>
<style lang='scss'>
// 拖拽
.dragClass {
 background: rgba($color: #41c21a,$alpha: 0.5) !important;
}
// 停靠
.ghostClass {
 background: rgba($color: #6cacf5,$alpha: 0.5) !important;
}
// 選擇
.chosenClass:hover > td {
 background: rgba($color: #f56c6c,$alpha: 0.5) !important;
}
</style>

到此這篇關於vue 使用 sortable 實現 el-table 拖拽排序功能的文章就介紹到這了,更多相關vue實現 el-table 拖拽排序內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！