vue 一二级菜单的全选 使用v-model

页面

<div class="reportRight">
  <div class="reportTitle">
    <div class="title">报送内容</div>
    <div>
      <el-button size="mini" @click="selectReport(1)">全选</el-button>
      <el-button type="primary" size="mini" @click="selectReport(0)"
        >一键清空</el-button
      >
    </div>
  </div>
  <div class="reportContent">
    <div v-for="(item, index) in reportData" :key="index">
      <div class="contentTitle">
        <el-checkbox
          :label="item.id"
          v-model="item.isChecked"
          @change="selectAll($event, item)"
          >{{ item.name }}</el-checkbox
        >
      </div>
      <ul>
        <li v-for="(im, ins) in item.children" :key="ins">
          <el-checkbox
            :label="im.id"
            v-model="im.isChecked"
            @change="selectOne($event, im)"
            >{{ im.name }}</el-checkbox
          >
        </li>
      </ul>
    </div>
  </div>
</div>

js

// 全选与一建清空
selectReport(typeFlag) {
  // typeFlag =1 全选 0是清空
  if (typeFlag == 1) {
    this.reportData.forEach(item => {
      item.isChecked = true;
      item.children.forEach(im => {
        im.isChecked = true;
      });
    });
  } else {
    this.reportData.forEach(item => {
      item.isChecked = false;
      item.children.forEach(im => {
        im.isChecked = false;
      });
    });
  }
},
// 全选
selectAll(val, item) {
  if (val == true) {
    item.children.forEach(im => {
      im.isChecked = true;
      // this.checkData.push(im.id);
    });
  } else {
    item.children.forEach(im => {
      im.isChecked = false;
      // this.$set(im, 'isChecked', false)
    });
  }
  item.isChecked = val;
},
// 单选
selectOne(val, im) {
  let data;
  if (val) {
    im.isChecked = true;
  } else {
    im.isChecked = false;
  }
  this.reportData.forEach(item => {
    if (im.pid == item.id) {
      data = item;
      item.isChecked = true;
    }
  });
  let len = data.children.length;
  let checkedLen = 0;
  data.children.forEach(item => {
    if (item.isChecked == false) {
      checkedLen++;
    }
  });
  if (len == checkedLen) {
    this.reportData.forEach(item => {
      if (im.pid == item.id) {
        item.isChecked = false;
      }
    });
  }
},