antd-vue checkbox全选与反选

最新推荐文章于 2023-06-16 12:30:06 发布

z-robot

最新推荐文章于 2023-06-16 12:30:06 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/z_robot/article/details/121136835

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,
      });
    },