准备工作
首先使用 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"> {{ item.field_title }} 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); } },
