Vue如何实现数据的上移和下移

 更新时间:2024年06月07日 17:05:38   作者:小林犟  
这篇文章主要介绍了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]))
},

禁用上下移逻辑

  • 禁用上移:
:disabled="index === 0"
  • 禁用下移:
: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 3自定义指令开发的相关总结

    Vue 3自定义指令开发的相关总结

    这篇文章主要介绍了Vue 3自定义指令开发的相关总结,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • vue 行为验证码之滑动验证AJ-Captcha使用详解

    vue 行为验证码之滑动验证AJ-Captcha使用详解

    这篇文章主要介绍了vue 行为验证码之滑动验证AJ-Captcha使用详解,AJ-Captcha不需要npm安装,只需要将组件 verifition复制到所使用的components目录下,本文给大家详细讲解,需要的朋友可以参考下
    2023-05-05
  • vue 3 effect作用与原理解析

    vue 3 effect作用与原理解析

    Vue3的Effect是其响应式系统的核心,负责依赖追踪和自动响应,它通过ReactiveEffect类封装副作用逻辑,实现依赖收集和触发更新,本文介绍vue 3 effect作用与原理解析,感兴趣的朋友一起看看吧
    2025-02-02
  • vuex数据状态持久化问题

    vuex数据状态持久化问题

    这篇文章主要介绍了vuex数据状态持久化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue 中常用操作数组的方法(forEach()和reduce())

    vue 中常用操作数组的方法(forEach()和reduce())

    文章介绍了JavaScript中常用的操作数组方法,包括forEach()和reduce(),forEach()用于遍历数组并对每个元素执行操作,而reduce()则用于遍历数组并进行累加等迭代操作,感兴趣的朋友一起看看吧
    2025-03-03
  • vue-mugen-scroll组件实现pc端滚动刷新

    vue-mugen-scroll组件实现pc端滚动刷新

    这篇文章主要为大家详细介绍了vue-mugen-scroll组件实现pc端滚动刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • vue使用过滤器格式化日期

    vue使用过滤器格式化日期

    这篇文章主要为大家详细介绍了vue使用过滤器格式化日期,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • vue在history模式下打包部署问题及解决方案

    vue在history模式下打包部署问题及解决方案

    这篇文章主要介绍了vue在history模式下打包部署问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • vue Render中slots的使用的实例代码

    vue Render中slots的使用的实例代码

    本篇文章主要介绍了vue Render中slots的使用的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-07-07
  • vue3页面跳转传值时获取不到params值的问题解决

    vue3页面跳转传值时获取不到params值的问题解决

    在Vue3页面跳转时传递和获取参数通常通过路由参数和查询字符串实现,本文主要介绍了vue3页面跳转传值时获取不到params值的问题解决,感兴趣的可以了解一下
    2024-11-11

最新评论