使用#sortablejs對表格中拖拽行排序#Vue3#后端接口數據

*效果：

首先安裝插件sortable

npm install sortablejs --save

代碼：

<template><!-- sortable.js 進行表格排序 --><!-- 演示地址 --><div class="dem-add"><!-- Search start --><div class="dem-title"><p>演示地址</p><el-inputclass="query-input"v-model="tableForm.demoDevice"placeholder="搜索"@keyup.enter="handleQueryName"><template #prefix><el-icon class="el-input__icon"><search /></el-icon></template></el-input><el-button type="primary" :icon="Plus" circle @click="handleAdd" /></div><!-- Search end --><!-- Table start --><div class="bs-page-table"><el-table :data="tableData" :row-key="(record) => record.sort"><el-table-column prop="sort" label="排序" width="60" /><el-table-column prop="demoDevice" label="演示端" width="150" /><el-table-column prop="address" label="地址" width="180" /><el-table-column prop="description" label="特殊說明" width="180" /><el-table-column prop="fileIds" label="附加" width="100"><template #default="scope"><a:href="`http://192.168.1.214:5050${scope.row.files[0].filePath}`"style="color: blue; text-decoration: none"target="_blank"><el-buttoncirclesize="default"type="default":icon="FolderChecked"></el-button></a></template></el-table-column><el-table-column fixed="right" label="操作" width="100"><template #default="scope"><el-buttontype="danger"@click="handleRowDel(scope.$index)":icon="Delete"circle/></template></el-table-column></el-table><el-dialog v-model="dialogFormVisible" title="新增" width="500"><el-form :model="tableForm"><el-form-item label="排序" :label-width="80"><el-input v-model="tableForm.sort" autocomplete="off" /></el-form-item><el-form-item label="演示端" :label-width="80"><el-input v-model="tableForm.demoDevice" autocomplete="off" /></el-form-item><el-form-item label="地址" :label-width="80"><el-input v-model="tableForm.address" autocomplete="off" /></el-form-item><el-form-item label="特殊說明" :label-width="80"><el-input v-model="tableForm.description" autocomplete="off" /></el-form-item><el-form-item label="附加" :label-width="80"><el-uploadmultipleclass="upload-demo"action="":http-request="uploadFile"list-type="picture"><el-button type="primary">上傳文件</el-button></el-upload></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogFormVisible = false"> 取消 </el-button><el-button type="primary" @click="dialogConfirm"> 確認 </el-button></div></template></el-dialog></div><!-- Table end --></div>
</template>
<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { ref, onMounted, toRaw } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import { Delete } from "@element-plus/icons-vue";
import { FolderChecked } from "@element-plus/icons-vue";
import { nextTick } from "vue";
import Sortable from "sortablejs";const router = useRouter();
console.log(router.currentRoute.value.path); //當前路由路徑
sessionStorage.setItem("path", router.currentRoute.value.path);// 演示地址
// 拖動行排序
const changeRow = () => {const el = document.querySelector(".el-table__body-wrapper tbody");new Sortable(el, {animation: 150, // 動畫// sort: true,ghostClass: "sortable-ghost",onEnd: (evt: any) => {console.log("oldIndex", evt.oldIndex); // 當前行的被拖拽前的順序console.log("newIndex", evt.newIndex); // 當前行的被拖拽后的順序const curRow = tableData.value.splice(evt.oldIndex, 1)[0];tableData.value.splice(evt.newIndex, 0, curRow);console.log("tableData.value新數據", tableData.value);},});
};// 定義表格
const tableData = ref<any>([]);
// 定義彈窗表單
let tableForm = ref({sort: "",demoDevice: "",address: "",description: "",fileIds: <any>[],file: "",
});
// 默認對話框關閉狀態
const dialogFormVisible = ref(false);
// 調用接口數據在表單顯示
const port1 = async () => {await axios.post("http://192.168.1.214:5050/api/Project/DemoGetTable", {pageIndex: 1,pageSize: 100,projectId: "1",}).then((response) => {// 將找到的數據返回給表單顯示tableData.value = response.data.data.list;console.log("tableData.value原數據", tableData.value);}).catch((error) => {console.error(error);});
};
// 掛載
onMounted(() => {port1();nextTick(() => {changeRow();});
});
// 搜索（通過name值查找）
const handleQueryName = () => {console.log("搜索");
};
// 新增
const handleAdd = async () => {// 打開新增對話框dialogFormVisible.value = true;// 設置空的綁定對象tableForm.value = {demoDevice: "",address: "",description: "",sort: "",fileIds: [],file: "",};
};
// 上傳文件
const uploadFile = async (val: any) => {tableForm.value.file = val.file;// 數據交互let formdata = new FormData();formdata.append("File", tableForm.value.file);axios// 上傳文件接口.post("http://192.168.1.214:5050/api/File/UploadFile", formdata, {headers: { "Content-Type": "multipart/form-data" },}).then((res) => {// 將文件id值傳給tableForm的屬性fileIdstableForm.value.fileIds.push(res.data.data.id);const newobj = Object.assign({ projectId: "1" }, toRaw(tableForm.value));axios// 添加演示地址接口.post("http://192.168.1.214:5050/api/Project/DemoAdd", newobj);});
};
// 刪除
const handleRowDel = async (index: any) => {// 找到要刪除的接口中對應的對象await axios.post("http://192.168.1.214:5050/api/Project/DemoDel", {// 獲取到當前索引index下的id值，toRaw()方法獲取原始對象id: toRaw(tableData.value[index]).id,});// 從index位置開始，刪除一行即可tableData.value.splice(index, 1);
};
// 確認表單彈窗
const dialogConfirm = () => {dialogFormVisible.value = false;port1();
};
</script><style scoped lang="scss">
// 演示地址
.dem-add {width: 800px;margin: 20px 50px;background-color: rgba(255, 255, 255, 0.333);box-shadow: 0 8px 16px #0005;border-radius: 16px;overflow: hidden;// 標簽.dem-title {display: flex;justify-content: space-between;align-items: center;background-color: rgba(207, 204, 204, 0.267);padding: 0 20px;p {float: left;width: 150px;color: #000;}// 搜索::v-deep .el-input__wrapper {border-radius: 100px;}.query-input {width: 240px;height: 35px;margin: 10px auto;margin-left: 330px;background-color: transparent;transition: 0.2s;}::v-deep .el-input__wrapper:hover {background-color: #fff8;box-shadow: 0 5px 40px #0002;}// 增加按鈕.el-button {float: left;margin-top: 3px;margin-left: 10px;}}// 表格.bs-page-table {.el-table {width: 100%;border: 1px solid rgb(219, 219, 219);padding: 10px;.el-table-column {border-collapse: collapse;text-align: left;}}}// 分頁.demo-pagination-block {padding: 9px 20px;}
}
</style>

#這個只是表面功夫，后端數據庫中的數據排序一直都沒變，所以想要真正改變排序，還需要后端寫個接口。