vue 实现简单的上移下移
多个活动可修改活动的排序,排序影响活动的优先级。有多个活动时,第一个活动无法上移,最后一个活动无法下移。用到了splice方法 ,详见。方法用于添加或删除数组中的元素。注意:这种方法会改变原数组。
·
背景:
多个活动可修改活动的排序,排序影响活动的优先级。只有一个活动时,不可删除。有多个活动时,第一个活动无法上移,最后一个活动无法下移。
知识点:
用到了splice方法 ,详见 JavaScript splice() 方法 | 菜鸟教程
splice()方法用于添加或删除数组中的元素
注意:这种方法会改变原数组
代码实现:
<template>
<div>
<div class="wrap" v-for="(item, index) in frequency" :key="index">
<p>{{item.label}}</p>
<div class="wrap-btn">
<button :disabled="index === 0" @click="moveUp(index)">上移</button>
<button :disabled="index === frequency.length - 1" @click="moveDown(index)">下移</button>
<button :disabled="frequency.length === 1" @click="deleteItem(index)">删除</button>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
frequency: [
{ label: '不限0' },
{ label: '活动a' },
{ label: '活动b' },
{ label: '活动c' },
{ label: '活动d' },
]
}
},
methods: {
// 上移
moveUp (index) {
let arr = this.frequency
arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]))
},
// 下移
moveDown (index) {
let arr = this.frequency
arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]))
},
// 删除
deleteItem (index) {
this.frequency.splice(index, 1)
}
}
}
</script>
<style scoped>
.wrap {
display: flex;
align-items: center;
}
.wrap-btn {
margin-left: 16px;
}
</style>
效果图:
更多推荐
已为社区贡献3条内容
所有评论(0)