Vue如何實(shí)現(xiàn)數(shù)據(jù)的上移和下移

更新時間：2024年06月07日 17:05:38 作者：小林犟

這篇文章主要介紹了Vue如何實(shí)現(xiàn)數(shù)據(jù)的上移和下移問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue實(shí)現(xiàn)數(shù)據(jù)的上移和下移

場景

點(diǎn)擊上移或下移按鈕進(jìn)行列表移動，第一行則不能上移，最后一行則不能下移

在這里插入圖片描述

解決方案

<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 () {
      //選中行數(shù)據(jù)
      let arrChecked = this.$refs.ref_ri_table.getCheckboxRecords();
      //表格數(shù)據(jù)
      let arr = this.tableData;
        //正序遍歷，保證移動完成的數(shù)據(jù)在下一次循環(huán)時位置不會再變動
        a: for (let index1 = 0; index1 < arrChecked.length; index1++) {
          b: for (let index2 = 0; index2 < arr.length; index2++) {
            //選中數(shù)據(jù)定位到其在總數(shù)據(jù)中的位置時開始上移
            if (arrChecked[index1] === arr[index2]) {
              //選中數(shù)據(jù)與總數(shù)據(jù)索引相同時，說明已經(jīng)上移到最上層，結(jié)束這層
              //循環(huán)
              if (index1 === index2) {
                break b;
              }
              //上移一位到達(dá)上一條數(shù)據(jù)的上方
              arr.splice(index2 - 1, 0, arr[index2]);
              //刪除原數(shù)據(jù)
              arr.splice(index2 + 1, 1);
              //上移完成結(jié)束內(nèi)存循環(huán)，開始移動下一條選中數(shù)據(jù)
              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]) {
              //選中數(shù)據(jù)索引+表格數(shù)組長度-選中數(shù)組長度=選中數(shù)據(jù)索引，代表以及下移到最底部，結(jié)束下移
              if (index1 + arr.length - arrChecked.length === index2) {
                break b;
              }
              arr.splice(index2 + 2, 0, arr[index2]);
              arr.splice(index2, 1);
              break b;
            }
          }
        }
        },