项目中老大心血来潮设计了一可以拖动达到排序的功能,感觉没什么用,但是没办法,实现吧!
这功能肯定不会手撸了,直接上插件
使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedraggable插件,此插件依赖Sortable.js.
教程地址:https://blog.csdn.net/IT_HLM/article/details/79541741
教程地址:https://blog.csdn.net/zhaoxiang66/article/details/81003094
- 安装npm install vuedraggable -S(可能需要安装Sortable)
- 引用import draggable from 'vuedraggable'
- 注册组件components: { draggable },
- 通过draggable标签来使用
- 调用update方法,此方法事件对象返回新索引和旧索引,同样数据是响应式的.
template代码:
1 <draggable v-model="codeList" @update="datadragEnd" :options="{animation:200}"> 2 <div class="drag-item" v-for="(item,i) in codeList" :key="i"> 3 <el-row> 4 <el-col class="line" :span="6"> {{item.field_title}}</el-col> 5 <el-col class="line" :span="8"> 6 <el-switch 7 v-model="item.is_show" 8 active-color="#13ce66" 9 @change="lockChange(item)" 10 :active-value="1" 11 :inactive-value="0" 12 ></el-switch> 13 </el-col> 14 <el-col :span="8"> 15 <el-button type="text" size="mini" @click="showEditCode(item)">编辑</el-button> 16 <el-button 17 v-if="item.is_system != 1" 18 type="text" 19 size="mini" 20 @click="deleCode(item)" 21 >删除</el-button> 22 </el-col> 23 </el-row> 24 </div> 25 </draggable>
methods代码:
1 async datadragEnd(evt) { 2 evt.preventDefault(); 3 // console.log('拖动前的索引 :' + evt.oldIndex) 4 // console.log('拖动后的索引 :' + evt.newIndex) 5 // 遍历数组,将索引值赋值到对应的sort_order上面,完成排序 6 let arr = this.codeList; 7 let newArr = await arr.map((item, i) => { 8 return { 9 sort_order: i, 10 field_code: item.field_code 11 }; 12 }); 13 const res = await this.$axios.post(`customer/save_order`, { 14 list: newArr 15 }); 16 // console.log(res) 17 const { error, message } = res.data; 18 if (error == 0) { 19 this.$message.success(message); 20 } 21 },