vue利用splice對數組渲染的數據進行上下移動操作

先看知識點：

splice交換數組內指定元素：

            swapItems(arr, index1, index2){//交換元素 --//數組,元素1，元素2
                 arr[index1] = arr.splice(index2, 1, arr[index1])[0];
                 return arr;
            },

實際案例：實現數組元素上下移動

根據for循環出來的數個列表其實是一個數組：列表一行可上下移動比如播放列表下移

列表是由數組順序展示，所以只要操作數組順序即可（另一種是按照指定key排序）

操作數組內的數據進行上下移動只要三個工具函數即可：

交換數組內元素

swapItems(arr, index1, index2){//交換元素 --//數組,元素1，元素2
                 arr[index1] = arr.splice(index2, 1, arr[index1])[0];
                 return arr;
            },

上移

            upRecord(arr, $index){//上移
                 if($index == 0) {
                    return;
                }
                this.swapItems(arr, $index, $index - 1);
            },

下移

            downRecord (arr, $index){//下移
                if($index == arr.length -1) {
                    return;
                }
                this.swapItems(arr, $index, $index + 1);
            },

置頂

toFirst(fieldData,index) {//置頂
                if(index!=0){
                    // fieldData[index] = fieldData.splice(0, 1, fieldData[index])[0]; 這種方法是與另一個元素交換了位子，
                    fieldData.unshift(fieldData.splice(index , 1)[0]);
                }
            },

置底

toLast(fieldData,index){//置底
                    // fieldData[index] = fieldData.splice(0, 1, fieldData[index])[0]; 這種方法是與另一個元素交換了位子，
                    fieldData.push(fieldData.splice(index , 1)[0]);
            },

說明：參數是數組和當前所操作的數據在數組中的索引

在點擊事件內傳入渲染本列表的數組和當前點擊的索引即可使用：

            handleMenuClick(e,i){//上移下移事件
                console.log(e,i)//e是默認框架事件來獲取key值，i是傳入的當前列表在數組的索引
                if(e.key=="2"){//下移
                    this.downRecord(this.ajaxlist,i)
                }else{//上移
                    this.upRecord(this.ajaxlist,i)
                }
            },

效果如下：

置定類似