VUE 实现checkbox的全选/反选

1、页面结构部分

<template>
    <div>
        <!--给全选按钮绑定v-mode变量,值为true时就是选中状态,绑定点击事件,执行全选和反选操作-->
        <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'>全选
        <div v-for='checkb in checkboxData' :key="checkb.id">
            <!--给每个复选按钮绑定同一个v-mode数组变量,数组里面有相应的value就被选中-->
            <input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkboxList' :value="checkb.id">{{checkb.value}}
        </div>
    </div>
</template>

2、JS部分

<script>
export default {
    methods:{
        checkedAll: function() {
            if (this.checked) {//实现反选
                this.checkboxList = [];
            } else { //实现全选
                this.checkboxList = [];
                this.checkboxData.forEach( (item) => {
                    this.checkboxList.push(item.id);
                });
            }
        }
    },
    watch: { //深度 watcher
        checkboxList: {
            handler: function (val, oldVal) { 
                if (this.checkboxList.length === this.checkboxData.length) {
                    this.checked=true;
                } else {
                    this.checked=false;
                }
            },
            deep: true
        }
    },
    data () {
        return {
            checkboxData:[{
                id:'1',
                value:'苹果'
            },{
                id:'2',
                value:'荔枝'
            },{
                id:'3',
                value:'香蕉'
            },{
                id:'4',
                value:'火龙果'
            }],
            checkboxList:[],
            checked: false
        }
    }
};
</script>
  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过在表格外部添加一个复框来实现全选/功能,具体实现如下: ```vue <template> <div> <a-checkbox v-model="allSelected" @change="handleAllSelectedChange">全选</a-checkbox> <a-table :columns="columns" :dataSource="dataSource" :rowSelection="rowSelection"></a-table> </div> </template> <script> import { Table, Checkbox } from 'ant-design-vue'; export default { components: { ATable: Table, ACheckbox: Checkbox, }, data() { return { allSelected: false, dataSource: [ { id: 1, name: 'John Brown', age: 18 }, { id: 2, name: 'Jim Green', age: 24 }, { id: 3, name: 'Joe Black', age: 30 }, ], selectedRowKeys: [], columns: [ { title: 'ID', dataIndex: 'id', }, { title: '姓名', dataIndex: 'name', }, { title: '年龄', dataIndex: 'age', }, ], }; }, computed: { rowSelection() { return { selectedRowKeys: this.selectedRowKeys, onChange: this.handleSelectedRowKeysChange, }; }, }, methods: { handleSelectedRowKeysChange(selectedRowKeys) { this.selectedRowKeys = selectedRowKeys; }, handleAllSelectedChange(checked) { if (checked) { this.selectedRowKeys = this.dataSource.map(item => item.id); } else { this.selectedRowKeys = []; } }, }, }; </script> ``` 在上面的代码中,我们在表格外部添加了一个复框,并绑定了`allSelected`属性来控制它的中状态。接着,我们在表格的`rowSelection`属性中设置了`selectedRowKeys`和`onChange`,其中`selectedRowKeys`绑定到了`selectedRowKeys`属性,`onChange`绑定到了`handleSelectedRowKeysChange`方法上。当表格中的行被中或取消中时,`selectedRowKeys`会发生变化,`handleSelectedRowKeysChange`方法会被调用。 当全选按钮被中或取消中时,我们可以通过`handleAllSelectedChange`方法来实现全选/功能。如果全选按钮被中,则将`selectedRowKeys`设置为所有行的`id`,否则将`selectedRowKeys`清空。这样,就实现全选/功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值