一、前言
今天在项目中遇到了一个需求就是通过点击 这两个上移和下移的 箭头实现内容的上移和下移，实际就是 调用函数改变了他们在数组中的次序。由需求可以知道,改变的 数组中紧邻的值在数组中的的次序。
二、实现过程
1.先在util.js文件中定义了上移和下移，交换数组中的值的方法
// 规格选项列表上移的方法 export function useArrayMoveUp(arr, index) { swapArray(arr, index, index - 1) } // 规格选项列表下移的方法 export function useArrayDown(arr, index) { swapArray(arr, index, index + 1) } function swapArray(arr, index1, index2) { arr[index1] = arr.splice(index2, 1, arr[index1])[0] return arr }
2.定义排序的方法,进行页面交互
// 排序规格选项 export function sortCard(action, index) { if (action == 'up') { useArrayMoveUp(sku_card_list.value, index) } else { useArrayMoveDown(sku_card_list.value, index) } }
3.给两个按钮绑定点击事件,并且让数组第一个不能进行上移，数组中最后一个不进行下移，对按钮添加disabled属性为true
<el-button class="ml-auto" size="small" @click="sortCard('up',index)" :disabled="index == 0"> <el-icon> <Top /> </el-icon> </el-button> <el-button size="small" @click="sortCard('down',index)" :disabled="index === (sku_card_list.length - 1)"> <el-icon> <Bottom /> </el-icon> </el-button>
至此就实现了前端页面的静态效果交互，只是对前端页面进行了交互，并未进行前后端的交互，下面，进行调用接口实现前后端的交互效果
定义接口方法
// 排序商品规格选项 export function sortGoodsSkusCard(data) { return axios.post(`/admin/goods_skus_card/sort`, data) }
修改sortCard方法，实现前后端交互。
//引入接口方法 import { sortGoodsSkusCard } from '~/api/goods.js' export function sortCard(action, index) { // 拷贝一份规格选项的值 let oList = JSON.parse(JSON.stringify(sku_card_list.value)) let func = action == 'up' ? useArrayMoveUp : useArrayMoveDown func(oList, index) let sortData = oList.map((o, i) => { return { id: o.id, order: i + 1 } }) sortGoodsSkusCard({ sortdata: sortData }) .then((res) => { // 后端修改完毕，然后再修改前端的值 func(sku_card_list.value, index) }) .finally(() => {}) }
最终，实现了前后端交互的效果,发现数据永久修改。
三、小结
通过以下代码
arr[index1] = arr.splice(index2, 1, arr[index1])[0]
实现了数组之前两个值的交换效果，是一种很巧妙的方法，相当于执行了下列操作
将数组中1，2的位置替换
[1, 2, 3, 4] 原数组
[2, 2, 3, 4] arr.splice(index2,1,arr[index1]) 执行操作的结果且改变了原数组
[2, 1, 3, 4] arr.splice(index2,1,arr[index1])返回了 2，然后将2赋给 arr[index1]
就完成了操作，很巧妙的方法
