vue+element+vuedraggable实现拖拽排序

Posted 2021-09-11 web半晨

准备工作

首先使用 yarn add vuedraggable 或者 npm i -S vuedraggable 安装组件。

<draggable
	v-model="codeList"
	@update="datadragEnd"
	:options="{ animation: 200 }"
>
	<div class="drag-item" v-for="(item, i) in codeList" :key="i">
	<el-row>
		<el-col class="line" :span="6">&nbsp;{{ item.field_title }}</el-col>
	</el-row>
	</div>
</draggable>

import draggable from "vuedraggable";
async datadragEnd(evt) {
	evt.preventDefault();
	// console.log('拖动前的索引 :' + evt.oldIndex)
	// console.log('拖动后的索引 :' + evt.newIndex)
	// 遍历数组，将索引值赋值到对应的 sort_order上面，完成排序
	let arr = this.codeList;
	let newArr = await arr.map((item, i) => {
		return {
			sort_order: i,
			field_code: item.field_code,
		};
	});
	const res = await this.$axios.post(`customer/save_order`, {
		list: newArr,
	});
	// console.log(res);
	const { error, message } = res.data;
	if (error == 0) {
		this.$message.success(message);
	}
},