以下是實現方案

使用資料控制checkbox的勾選狀態，感覺這種方式不同於jquery的直接操作DOM，剛剛開始使用真的搞不懂，思路一時轉不過來，遇到同樣問題的同學可以參考我這個做法，有疑問的同學可以留言。

<template>
<div class="content">
<div class="power">
<h4>許可權設定</h4>
<div v-for="(permissionTop, topIndex) in tableData" :key="topIndex" >
<p class="checkGroup" style="width:99%;">
<el-checkbox :indeterminate="permissionTop.indeterminate" :key="topIndex" v-model="permissionTop.mychecked" :label="permissionTop.permissionId" @change="onChangeTop(topIndex, permissionTop.permissionId, $event)">{{permissionTop.permissionName}}</el-checkbox>
</p>
<div style="margin: 15px 0;"></div>
<el-checkbox v-for="permissionSon in permissionTop.childrenList" v-model="permissionSon.mychecked" @change="onChangeSon(topIndex, permissionSon.permissionId, permissionTop.permissionId, $event)" :label="permissionSon.permissionId" :key="permissionSon.permissionId">{{permissionSon.permissionName}}</el-checkbox>
</div>
<el-button class="keep" @click="submitOperatorInfo" >儲存</el-button>
</div>
</div>
</template>
 

事件方法：

data(){
        return{
            tableData: [
            {
                "childrenList": [
                    {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 15,"permissionId": 21,"permissionKey": "orderForm","permissionName": "訂單","permissionPath": "","showFlag": "1"},
                    {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 15,"permissionId": 22, "permissionKey": "user","permissionName": "使用者","permissionPath": "","showFlag": "1"},
                    {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 15, "permissionId": 23,"permissionKey": "exportOrderForm","permissionName": "匯出訂單","permissionPath": "","showFlag": "1"},
                    {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 15, "permissionId": 24, "permissionKey": "exportUser", "permissionName": "匯出使用者","permissionPath": "","showFlag": "1"}
                ],
                "permissionName": "使用者服務","mychecked": true,"indeterminate": false,"createTime": 1533707273000,"parentPermId": 0,"permissionId": 15,"permissionKey": "userService","permissionPath": "","showFlag": "1"
            },
            {
                "childrenList": [
                    {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 16,"permissionId": 25,"permissionKey": "contentView","permissionName": "內容檢視","permissionPath": "","showFlag": "1"},
                    {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 16,"permissionId": 26,"permissionKey": "contentAccept","permissionName": "內容採納","permissionPath": "","showFlag": "1"},
                    {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 16,"permissionId": 27,"permissionKey": "distributionCenter","permissionName": "分銷中心","permissionPath": "","showFlag": "1"},
                    {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 16,"permissionId": 28,"permissionKey": "myMall","permissionName": "我的商城","permissionPath": "","showFlag": "1"}
                ],
                "permissionName": "內容商城","mychecked": true,"indeterminate": false,"createTime": 1533707273000,"parentPermId": 0,"permissionId": 16,"permissionKey": "contentMall","permissionPath": "","showFlag": "1"
            }],
            activeName: 'accountManage',
            people:'',
            phoneNum:'',
            isIndeterminate:true,
        }
    },
mounted(){
        this.refurbishPermissionInfo();//重新整理許可權資訊
    },
mounted(){
        this.refurbishPermissionInfo();//重新整理許可權資訊
    },
    methods: {
        onChangeTop(index, topId, e){//父級change事件
            this.tableData[index].mychecked = e//父級勾選後，子級全部勾選或者取消
            if(e == false) this.tableData[index].indeterminate = false //去掉不確定狀態
            var childrenArray = this.tableData[index].childrenList
            if(childrenArray)
                for(var i=0,len=childrenArray.length; i<len; i++)
                    childrenArray[i].mychecked = e
        },
        onChangeSon(topIndex, sonId, topId, e){//子級change事件
            var childrenArray = this.tableData[topIndex].childrenList
            var tickCount = 0, unTickCount = 0, len = childrenArray.length
            for(var i = 0; i < len; i++){
                if(sonId == childrenArray[i].permissionId) childrenArray[i].mychecked = e 
                if(childrenArray[i].mychecked == true) tickCount++
                if(childrenArray[i].mychecked == false) unTickCount++
            }
            if(tickCount == len) {//子級全勾選
                this.tableData[topIndex].mychecked = true 
                this.tableData[topIndex].indeterminate = false
            } else if(unTickCount == len) {//子級全不勾選
                this.tableData[topIndex].mychecked = false 
                this.tableData[topIndex].indeterminate = false
            } else {
                this.tableData[topIndex].mychecked = true 
                this.tableData[topIndex].indeterminate = true //新增不確定狀態
            }
        },
        refurbishPermissionInfo(){//重新整理checkbox
            var userId = 63
            Api.admin.post('/user/findManagerPermissionList?userId='+userId).then(resp => {
                console.log(resp.data)
                if(resp.data.code == 1 && resp.data.data && resp.data.data.length > 0){
                    const checkboxShow = document.getElementById("checkboxShow")
                    const permissionArray = resp.data.data
                    const permissionArrayObj = new Array()
                    for(var i = 0,len = permissionArray.length; i < len; i++){//根許可權
                        permissionArrayObj[i] = new Object()
                        permissionArrayObj[i].permissionName = permissionArray[i].permissionName
                        permissionArrayObj[i].permissionId = permissionArray[i].permissionId
                        permissionArrayObj[i].parentPermissionId = permissionArray[i].parentPermId
                        permissionArrayObj[i].mychecked = false
                        permissionArrayObj[i].indeterminate = false
                        if(permissionArray[i].childrenList && permissionArray[i].childrenList.length > 0){//子許可權
                            const originalChildrenList = permissionArray[i].childrenList
                            const childrenArray = new Array()
                            for(var j = 0,leng = originalChildrenList.length; j < leng; j++){
                                const childrenObj = new Object()
                                childrenObj.permissionName = originalChildrenList[j].permissionName
                                childrenObj.permissionId = originalChildrenList[j].permissionId
                                childrenObj.parentPermissionId = originalChildrenList[j].parentPermId
                                childrenObj.mychecked = false
                                permissionArrayObj[i].indeterminate = false
                                childrenArray[j] = childrenObj
                            }
                            permissionArrayObj[i].childrenList = childrenArray
                        }
                    }
                    this.tableData = permissionArrayObj
                }
            })
        },
        submitOperatorInfo(){
            var permissionArray = new Array()
            if(this.tableData) {
                for(var i = 0,len = this.tableData.length; i < len; i++){
                    if(this.tableData[i].mychecked == true) permissionArray.push(this.tableData[i].permissionId)
                    if(this.tableData[i].childrenList && this.tableData[i].childrenList.length > 0){
                        var sonPermissionArray = this.tableData[i].childrenList
                        for(var j = 0, leng = sonPermissionArray.length; j < leng; j++)
                            permissionArray.push(sonPermissionArray[j].permissionId)
                    }
                }
            }
            let params = new URLSearchParams();
            params.append('orgUserId', "");//企業ID
            params.append('permissionList[]', permissionArray);//許可權ID
            Api.admin.post('/login/addOperators', params).then(resp => {
                if (resp.data.code == 1) {//成功
                    window.location.href = "/ShopManage";//重新整理賬戶管理
                } else return this.$message(resp.data.msg);
            });
        }
    }
 

mycheck是控制checkbox的勾選狀態，indeterminate則是控制checkbox不確定狀態。

執行效果：

感興趣的朋友可以關注微信公眾號（會定時推送新的知識）：