element ui 多个el-checkbox多选框用法

效果图：

  <div
        class="permissions-information-content"
        v-for="(data, index) in newJurisdictionData"
        :key="data.id"
      >
        <el-checkbox
          :label="data.code"
          @change="checkAllChildren($event, data, index)"
          :indeterminate="indeterminate[index]"
          v-model="checkedAll[index]"
          >{
  { data.content }}</el-checkbox
        >
        <el-checkbox-group
          v-model="checkList[index]"
          @change="selectChildrenCheck($event, index, data)"
        >
          <el-checkbox
            v-for="menu in data.children"
            :key="menu.id"
            :label="menu.code"
            >{
  { menu.content }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
       <div class="check-all-button">
      <el-checkbox @change="checkAllChange" v-model="allCheckedList"
        >选择全部</el-checkbox
      >
      <el-button type="primary" @click="submit">保存</el-button>
    </div>

//commonData.js
//注意：code为数组时，意味着拥有多个权限按钮（添加删除之类，可根据实际情况调整）
const jurisdictionData = [
  {
   
    content: "数据1",
    checked: true,
    code: ["5005", "5007", "4001", "4002"],
    level: 1,
    id: 1,
    children: [
      {
   
        content: "数据1-1",
        code: "5006",
        checked: true,
        level: 2,
        id: 10,
        fid: 1,
      },
      {
   
        content: "数据1-2",
        code: "1001",
        checked: true,
        level: 2,
        i