-
实用干货
对于前端页面,某个业务实体,需要实现在列表中拖拽排序,本文是介绍使用VueDraggablePlus实现列表内拖拽排序。
1.安装
npm install vue-draggable-plus
2.引入
import { VueDraggable } from 'vue-draggable-plus'
3.在项目中使用
<VueDraggable v-model="state.tableData" target=".sort-target" @end="handleUpdata" animation="150">
<div class="table">
<table id="table1">
<thead>
<tr>
<th>排列顺序</th>
<th>推荐模块</th>
<th>课程名称</th>
<th>课程平台</th>
<th>课程标签</th>
<th style="width: 190px;">操作</th>
</tr>
</thead>
<tbody class="sort-target">
<tr v-for="item in state.tableData" :key="item.name" class="cursor-move">
<td>{{ item.sort }}</td>
<td>{{ item.course_group_name }}</td>
<td>{{ item.course_name }}</td>
<td>{{ item.platform }}</td>
<td>
<el-select v-model="item.tag" @change="tagChange($event, item.id)"
placeholder="请选择">
<el-option v-for="item in state.tagOptions" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</td>
<td><el-link type="danger" @click="handleDelete(item.id)">删除</el-link></td>
</tr>
</tbody>
</table>
</div>
</VueDraggable>
4.此处为vue3使用方法
<script setup lang='ts'>
import { VueDraggable } from 'vue-draggable-plus'
import { SortableEvent } from "sortablejs"
// 此处为调用接口实现拖拽排序
const handleUpdata = (event: SortableEvent) => {
let ids = [] as any
state.tableData.forEach((item: any) => {
ids.push(item.id)
});
let data = {
course_group_id: state.queryParams.course_group_id,
platform: state.queryParams.platform,
ids: ids
}
moveRecommend(data).then((res: any) => {
if (res.code == 1) {
ElMessage({
showClose: true,
message: '保存成功',
type: 'success',
})
getList()
}
});
}
</script>
5.此处为表格css样式
<style scoped>
table {
width: 100%;
border-collapse: collapse;
text-align: center;
font-size: 14px;
}
table th,
td {
border: 1px solid #ebeef5;
padding: 8px 0;
}
.table :deep(.el-table thead) {
color: #666;
font-weight: 400;
font-size: 13px;
}
table thead th {
background-color: #f3f3f3;
padding: 8px 0;
color: #222;
font-size: 13px;
}
</style>
时间