Vue实现数据的上移和下移
场景
点击上移或下移按钮进行列表移动，第一行则不能上移，最后一行则不能下移
解决方案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 上移下移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表单批量上移 下移
效果图
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // 上移handDmoveUp () { //选中行数据 let arrChecked = this.$refs.ref_ri_table.getCheckboxRecords(); //表格数据 let arr = this.tableData; //正序遍历，保证移动完成的数据在下一次循环时位置不会再变动 a: for (let index1 = 0; 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; } } } }, |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
