IT俱乐部 JavaScript Vue如何实现数据的上移和下移

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

Vue实现数据的上移和下移

场景

点击上移下移按钮进行列表移动,第一行不能上移最后一行不能下移

解决方案

上移下移

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 = 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俱乐部。

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/11678.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部