背景:

多个活动可修改活动的排序,排序影响活动的优先级。只有一个活动时,不可删除。有多个活动时,第一个活动无法上移,最后一个活动无法下移。

知识点:

用到了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>

效果图:

 

Logo

前往低代码交流专区

更多推荐