使用vue.js实现checkbox的全选，和多个的删除

最新推荐文章于 2025-06-23 10:53:00 发布

jaxQin

最新推荐文章于 2025-06-23 10:53:00 发布

阅读量2.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：代码记录文章标签： vue-js-全选 vuejs多次删除

本文链接：https://blog.youkuaiyun.com/qq_29436563/article/details/55510294

代码记录专栏收录该内容

1 篇文章

订阅专栏

本文介绍使用Vue.js实现复选框全选功能及多项删除操作的方法。通过模板代码展示如何利用v-model与v-for进行数据绑定，并在脚本部分详细解释了全选和删除逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vue.js实现checkbox的全选，和多个的删除

欢迎大家来我的博客浏览更多的干货内容

www.jaxqin.com

template代码：
<template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr"> </label>{{item.name}} </li>： </ul> <button type="" @click="del">删除</button>{{selectArr}} <label> <input type="checkbox" class="checkbox" @click="selectAll" />全选 </label> </div> </template>

script部分：

<script>
var proData = [{
    "name": "j1ax"
}, {
    "name": "j2ax"
}, {
    "name": "j3ax"
}, {
    "name": "j4ax"
}]
export default {
    name: 'hello',
    data() {
        return {
            proData: proData,
            selectArr: []
        }
    },
    created() {
        this.$http.get('/api/home').then(function(response) {
            response = response.body;
            this.proData = response.data;
        })
    },
    methods: {
        del() {
            let arr = [];
            var len = this.proData.length;
            for (var i = 0; i < len; i++) {
                if (this.selectArr.indexOf(i)>=0) {
                    console.log(this.selectArr.indexOf(i))
                }else{
                    arr.push(proData[i])
                }
            }

            this.proData = arr;
            this.selectArr = []
        },
        selectAll(event) {
            var _this = this;
            console.log(event.currentTarget)
            if (!event.currentTarget.checked) {
                this.selectArr = [];
            } else { //实现全选
                _this.selectArr = [];
                _this.proData.forEach(function(item, i) {
                    _this.selectArr.push(i);
                });
            }
        }
    }
}
</script>