el-checkbox vue 三级联动实现全选

这个样子的

先是html

  <template #default>
                <div class="container">
                    <el-checkbox :indeterminate="isDocIndeterminate" v-model="checkDocAll" @change="handleCheckAllDocChange">报告</el-checkbox>
                    <el-checkbox-group class="container_one" v-model="checkedDocs" @change="handleCheckedDocsChange">
                        <el-checkbox v-for="doc in docOptions" :label="doc" :key="doc">{
  {doc}}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <hr>
                <div class="container" v-if="fileOptions.length>0">
                    <el-checkbox :indeterminate="isFileIndeterminate" v-model="checkFileAll" @change="handleCheckAllFileChange">附件</el-checkbox>
                    <el-checkbox-group class="container_one" v-model="checkedFiles" @change="handleCheckedFilesChange">
                        <el-checkbox v-for="item in fileOptions" :label="item" :key="item.id" :value="item.id">{
  {item.fileName}}</el-checkbox>
                    </el-checkbox-group>
                </div>

                <div class="downloadlodingno1">
                    <el-checkbox @change="handleCheckAll" v-model="checkAll">全选</el-checkbox>
                </div>
                </template>

data 定义部分

			 checkAll: false, //全选
            // 正文
            docOptions: ["正文"],
            checkDocAll: false,
            checkedDocs: [],
            isDocIndeterminate: true,
            // 附件
            fileOptions: [],
            checkFileAll: false,
            checkedFiles: [],
            isFileIndeterminate: true,

逻辑

 //全选
        handleCheckAll(val, value) {