vue实现多选框(复选框)

最新推荐文章于 2025-04-22 17:28:37 发布

不爱写代码的一位同学

最新推荐文章于 2025-04-22 17:28:37 发布

阅读量1.7w

点赞数 4

文章标签： vue vue.js html5

本文链接：https://blog.youkuaiyun.com/weixin_47084532/article/details/124235649

版权

本文展示了如何在Vue.js中实现表格的全选和多选功能，通过使用v-for循环遍历数据，结合checkbox状态管理和点击事件，完成选中与反选操作。示例代码详细解释了数据绑定和事件监听在组件交互中的应用。

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

<template>
    <table class="t1">
                <tr class="tr1">
                    <td>
                        <input type='checkbox' :checked="clsAll.length === pojectClsAll.length" @click='checkedAll()'>全选
                    </td>
                    <td v-for="(cls,index) in pojectClsAll" :key="index">
                        <input type='checkbox' :checked="clsAll.indexOf(cls.cid)>=0" @click='checkedOne(cls.cid)'>{{cls.cname}}
                    </td>
                </tr>
            </table>
</template>

data(){
        return{
            clsAll:['0','1','2','3','4','5','6','7','8','9','10','11','12','13'],
            pojectClsAll:"",
            isCheckedAll: false
        }
    },

methods:{
        checkedOne (id) {
            let idIndex = this.clsAll.indexOf(id)
            if (idIndex >= 0) {
            // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
            this.clsAll.splice(idIndex, 1)
            } else {
            // 选中该checkbox
            this.clsAll.push(id)
            }
            console.log(this.clsAll);
        },
        checkedAll () {
            this.isCheckedAll = !this.isCheckedAll
            if (this.isCheckedAll) {
                // 全选时
                this.clsAll = []
                this.pojectClsAll.forEach(function (fruit) {
                this.clsAll.push(fruit.cid)
                }, this)
            } else {
                this.clsAll = []
            }
            console.log(this.clsAll);
        },
}

效果:

可以通过console.log()来打印数组