数组方法 - splice 应用

「爱情、让人受尽委屈。」 2023-07-12 14:38 9阅读 0赞

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

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

效果：

![2020030910591384.gif][]

核心代码：

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、全选、删除、选出选中：** ###

效果：

![20200309132747860.gif][]

核心代码：

全选、单选在这块不解释了，说下删除选中，当用户选中要删除的数据时，需要拿到当前选中数据的索引，与当前所有数据对比，依次删除。删除时注意：如果用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>

[2020030910591384.gif]: https://img-blog.csdnimg.cn/2020030910591384.gif
[20200309132747860.gif]: https://img-blog.csdnimg.cn/20200309132747860.gif