目录
一、前言
今天在项目中遇到了一个需求就是通过点击 这两个上移和下移的 箭头实现内容的上移和下移,实际就是 调用函数改变了他们在数组中的次序。由需求可以知道,改变的 数组中紧邻的值在数组中的的次序。
二、实现过程
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]
就完成了操作,很巧妙的方法
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/148343.html