数组方法 - splice 应用

splice方法在实际开发中，非常常用，记录下几个应用小例子：

1、添加、删除，类似todolist：

效果：

核心代码：

arr数组是一个以为数字数组，双层for循环，外层循环是一行的数据（有几层），里边循环为数组的元素（数字），决定这一层中红色小方块的数量，计数器控制小方框数量，右边 加 或 减 控制该层是否被删除：

<template>
    <div style="display: flex;flex-direction: column;">
        <div v-for="(item, index) in arr" :key="index" style="display: flex; align-items: center; padding: 10px;">
            <span>第{{index + 1}}层</span>
            <el-input-number v-model="arr[index]" :min="1" :max="10" label="描述文字" size="mini" />
            <div style="display: flex; justify-content: center; width: 300px">
                <div v-for="i in item" :key="i" style="margin: 0 5px; border: 1px solid #ccc;background: darkred;width: 100%; height: 30px; text-align: center;line-height: 30px;color: #fff;">
                    {{i}}
                </div>
            </div>
            <el-button type="warning" icon="el-icon-remove" circle @click="add('-')" />
            <el-button type="danger" icon="el-icon-plus" circle @click="add('+')" />
        </div>
        <el-button v-if="!arr.length" type="primary" icon="el-icon-plus" circle @click="add('+')" />

    </div>
</template>
<script>
export default {
    data() {
        return {arr: []}
    },
    methods: {
        add(params) {
            // 不管从哪一层减 或者 加 都会从数组最后操作
            if(params === "-") {
                this.arr.splice(this.arr.length - 1, 1)
            }else if(params === "+"){
                this.arr.splice(this.arr.length, 0, 3)
            }
        }
    }
}
</script>

 

2、全选、删除、选出选中：

效果：

 

核心代码：

全选、单选在这块不解释了，说下删除选中，当用户选中要删除的数据时，需要拿到当前选中数据的索引，与当前所有数据对比，依次删除。删除时注意：如果用splice按顺序删除，一定会有bug，因为splice会改变原数组，且会改变删除的元素之后的元素的索引，解决方法：从后往前删除，也就是遍历所有数据时，从后往前遍历。

<template>
    <div>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <div v-for="(item, index) in arr" :key="index" style="display: flex; align-items: center; padding: 10px 0;">
                <el-checkbox :label="item.name"></el-checkbox>
                <div style="width: 100px;height: 20px; background: darkred;text-align: center; color: #fff;margin:0 10px;"></div>
                <el-button type="warning" icon="el-icon-remove" circle @click="remove(index)" size="mini"/>
            </div>
        </el-checkbox-group>
        <el-button type="primary" icon="el-icon-remove" @click="removeAll">删除选中</el-button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            arr: [{dataIndex:0, name: '1'},{dataIndex:1, name: '2'},{dataIndex:2, name: '3'},{dataIndex:3, name: '4'},{dataIndex:4, name: '5'}],
            checkedCities: [],
            isIndeterminate: true,
            checkAll: false
        }
    },
    methods: {
        handleCheckAllChange(val) {
            val ? this.arr.forEach(item => {this.checkedCities.push(item.name)}) : this.checkedCities = [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.arr.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.arr.length;
        },
        // 单条删除
        remove(index) {
            this.arr.splice(index, 1)
        },
        // 删除选中，首先要把要删除的元素的索引拿到，然后从后往前依次删除
        removeAll() {
            const arr = this.filter(this.checkedCities)
            for (let i = this.arr.length - 1; i >= 0 ; i --) {
                if(arr.includes(this.arr[i].dataIndex)) {
                    this.arr.splice(i, 1)
                }
            }
            this.checkedCities = []
        },
        filter(arr) {
            return this.arr.reduce((prev, next) => {
                if(arr.includes(next['name'])){
                    prev.push(next['dataIndex'])
                }
                return prev
            }, [])
        }
    }
}
</script>