[JavaScript知识库]element UI中el-checkbox(复选框)选中状态影响底部确认按钮状态 返回取消选择所有复选框

1、前两天项目有个新需求，需要做一个批量删除的功能，如下图所示：

2、需求：刚进入页面，没有选择任何选项的时候，确认删除按钮为禁用状态，当选择任意一项或多选的时候，禁用状态取消，并记录所选数量

刚看到这个需求的时候觉得很简单，以为复选框的状态true/false值跟底部的确认按钮同步就可以，但是这样选中复选框，再取消禁用按钮只跟当前一个复选框状态同步，最后跟朋友和同事讨论下得出结论,需要先给一个空数组,来记录当前选中了几个复选框,再最后判断底部确认按钮，代码如下：

3、代码实现部分：

 <div class="photoItem">
          <ul>
            <li v-for="(item, index) in photoAlbumList" :key="index">
              <img :src="item.imgUrl" alt="" />
              <el-checkbox
                v-model="item.showcheckbox"
                @change="checkedFn(item)"
              ></el-checkbox>
            </li>
          </ul>
          <div class="delbtns">
            <template>
              <el-button
                type="text"
                :disabled="isDisabled"
                :class="isDisabled ? 'nochekedbtn' : 'checkedbtn'"
                >确认删除<span v-if="!isDisabled">({{ arr.length }})</span></el-button
              >
              <el-button type="text" class="backbtn" @click="backBtnFn"
                >返回</el-button
              >
            </template>
          </div>
        </div>

?data数据：

 data() {
    return {
      //
      photoAlbumList: [
        {
          imgUrl:
            "http://img5.mtime.cn/mg/2022/02/26/085618.95664989_285X160X4.jpg",
          num: "16",
          showcheckbox: false,
        },
        {
          imgUrl:
            "http://img5.mtime.cn/mg/2022/02/26/085618.95664989_285X160X4.jpg",
          num: "16",
          showcheckbox: false,
        },
        {
          imgUrl:
            "http://img5.mtime.cn/mg/2022/02/26/085618.95664989_285X160X4.jpg",
          num: "16",
          showcheckbox: false,
        }
      ],
      isDisabled: true, //是否禁用确定删除按钮
      arr: [], //所选中的复选框
    };
  },

具体methds逻辑：当我们每次选中复选框的时候,都会记录当前所选中的,

  // 复选框改变的方法
    checkedFn(item) {
      console.log(item, "item");
      // 每次选中前都清空
      this.arr = [];
      this.photoAlbumList.forEach((obj) => {
        // 如果有选中的复选框则添加到数组当中
        if (obj.showcheckbox) {
          this.arr.push(item);
        }
      });

      if (this.arr.length > 0) {
        this.isDisabled = false;
      } else {
        this.isDisabled = true;
      }
    }

点击返回的时候,清空所有复选框

    // 点击返回的方法
    backBtnFn() {
      this.photoAlbumList.forEach((item) => {
        if (item) {
          item.showcheckbox = false;
          this.isDisabled = true     
        }
      });
    },

最终功能实现，可能有更优解，但是做的时候感觉这一块逻辑还是稍微有点绕，大佬有更优解，欢迎评论区留言指点