antd-vue checkbox全选与反选

最新推荐文章于 2025-09-26 03:02:56 发布

原创最新推荐文章于 2025-09-26 03:02:56 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种在前端开发中实现全选与多选框联动的方法。通过监听全选框变化来控制多选框的状态，并在多选框选择发生变化时更新全选框的状态。这种联动机制能够有效提升用户体验。

 <div>
        <div style="border-bottom: 1px solid #E9E9E9;margin-bottom: 4px">
          <a-checkbox :indeterminate="indeterminate" name="checkAll" :checked="checkAll" @change="onCheckAllChange">
            全选
          </a-checkbox>
        </div>
        <a-checkbox-group v-model="checkedList" :options="levelData.data" @change="onChange"/>
      </div>

 checkedList: [], // 默认选中
      indeterminate: true,
      checkAll: false,
      plainOptions: [],

 onChange(checkedList) {
      console.log(191, checkedList);

      this.indeterminate = !!checkedList.length && checkedList.length < this.levelData.data.length;
      this.checkAll = checkedList.length === this.levelData.data.length;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? this.levelData.data.map(item => item.value) : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },