Vue如何实现数据的上移和下移
2024/7/17 23:02:42
本文主要是介绍Vue如何实现数据的上移和下移,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
这篇文章主要介绍了Vue如何实现数据的上移和下移问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
目录
Vue实现数据的上移和下移
场景
解决方案
禁用上下移逻辑
Vue表单批量上移 下移
效果图
总结
Vue实现数据的上移和下移
场景
点击上移
或下移
按钮进行列表移动,第一行
则不能上移
,最后一行
则不能下移
解决方案
<el-button @click="moveUp(index)">上移</el-button> <el-button @click="moveDown(index)">下移</el-button> data() { return { list: [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' } ] } } // 上移 moveUp (index) { const arr = this.list arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1])) }, // 下移 moveDown (index) { const arr = this.list arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index])) },
禁用上下移逻辑
禁用上移:
1 | :disabled= "index === 0" |
禁用下移:
1 | :disabled= "index === list.length - 1" |
Vue表单批量上移 下移
效果图
// 上移 handDmoveUp () { //选中行数据 let arrChecked = this.$refs.ref_ri_table.getCheckboxRecords(); //表格数据 let arr = this.tableData; //正序遍历,保证移动完成的数据在下一次循环时位置不会再变动 a: for (let index1 = 0; index1 < arrChecked.length; index1++) { b: for (let index2 = 0; index2 < arr.length; index2++) { //选中数据定位到其在总数据中的位置时开始上移 if (arrChecked[index1] === arr[index2]) { //选中数据与总数据索引相同时,说明已经上移到最上层,结束这层 //循环 if (index1 === index2) { break b; } //上移一位到达上一条数据的上方 arr.splice(index2 - 1, 0, arr[index2]); //删除原数据 arr.splice(index2 + 1, 1); //上移完成结束内存循环,开始移动下一条选中数据 break b; } } } }, //下移 handMoveDown () { let arrChecked = this.$refs.ref_ri_table.getCheckboxRecords(); let arr = this.tableData; a: for (let index1 = arrChecked.length - 1; index1 >= 0; index1--) { b: for (let index2 = arr.length - 1; index2 >= 0; index2--) { if (arrChecked[index1] === arr[index2]) { //选中数据索引+表格数组长度-选中数组长度=选中数据索引,代表以及下移到最底部,结束下移 if (index1 + arr.length - arrChecked.length === index2) { break b; } arr.splice(index2 + 2, 0, arr[index2]); arr.splice(index2, 1); break b; } } } },
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
这篇关于Vue如何实现数据的上移和下移的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-08vue 框架是什么-icode9专业技术文章分享
- 2024-09-07VSCODE 如何调试 react UI 组件源码-icode9专业技术文章分享
- 2024-09-07ANTDesignVue项目实战:从零开始构建高效UI
- 2024-09-07Ant-Design Vue项目实战:从零开始构建高颜值企业级应用
- 2024-09-07【新手入门】Cropper.js项目实战:轻松打造图片裁剪功能
- 2024-09-07Hotkeys.js项目实战:轻松上手键盘快捷键功能
- 2024-09-07NuxtUI项目实战:从零开始构建Vue项目
- 2024-09-06深入理解与高效应用React Hooks:理论与实战
- 2024-09-06NextAuth:为您的Next.js应用快速搭建安全用户认证系统
- 2024-09-06React 入门:快速搭建您的第一个 React 应用