使用#sortablejs插件对表格中拖拽行排序#Vue3#后端接口数据

使用#sortablejs对表格中拖拽行排序#Vue3#后端接口数据

*效果：

拖动表格行排序

首先安装插件sortable

npm install sortablejs --save

代码：

<template>
<!-- sortable.js 进行表格排序 -->
<!-- 演示地址 -->
<div class="dem-add">
<!-- Search start -->
<div class="dem-title">
<p>演示地址</p>
<el-input
class="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-button
circle
size="default"
type="default"
:icon="FolderChecked"
></el-button>
</a>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template #default="scope">
<el-button
type="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-upload
multiple
class="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的属性fileIds
tableForm.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>

#这个只是表面功夫，后端数据库中的数据排序一直都没变，所以想要真正改变排序，还需要后端写个接口。