vue表格权限树组件

### **两列表格(完整版)**
```
<template>
    <div class="permission">
        <div class="check_all_box">
            <el-checkbox
                v-model="checkAll"
                :indeterminate="!!checkedList && !! checkedList.length && isIndeterminate['all']"
                @change="handleCheckAllChange"
            >
                全选
            </el-checkbox>
        </div>
        <el-checkbox-group
            v-model="checkedList"
            @change="handleItemChange"
        >
            <template v-for="(Ritem, Ridx) in allPermission">
                <div
                    class="check_item_box rflex"
                    :key="Ritem[allPermissionDataType.code]"
                >
                    <div class="parent_box border_box rflex flex_align_items_center">
                        <el-checkbox
                            :label="Ritem[allPermissionDataType.code]"
                            :indeterminate="getItemAll(Ritem)"
                            @change="v => handleCheckChange(v, [Ridx], Ritem)"
                        >
                            {{ Ritem[allPermissionDataType.name] }}
                        </el-checkbox>
                    </div>
                    <div
                        class="children_container rflex flex_wrap"
                        v-if="Array.isArray(Ritem[allPermissionDataType.childList]) && Ritem[allPermissionDataType.childList].length"
                    >
                        <template v-for="(Iitem, Iidx) in Ritem[allPermissionDataType.childList]">
                            <div
                                :key="Iitem[allPermissionDataType.code]"
                                class="children_row"
                            >
                                <div class="item_container">
                                    <el-checkbox
                                        :label="Iitem.label"
                                        :indeterminate="isIndeterminate[Iitem[allPermissionDataType.code]]"
                                        @change="v => handleCheckChange(v, [Ridx, Iidx], Iitem)"
                                    >
                                        {{ Iitem[allPermissionDataType.name] }}
                                    </el-checkbox>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </el-checkbox-group>
    </div>
</template>

} else if (idxArr.length === 2) {
                const cArr = list[idxArr[0]][this.allPermissionDataType.childList].map(i => i[this.allPermissionDataType.code])
                const hasChild = checkedList.some(i => cArr.includes(i))
                if (!hasChild) {
                    arr.delete(list[idxArr[0]][this.allPermissionDataType.code])
                }
            } else if (idxArr.length === 3) {
                const cArr2 = list[idxArr[0]][this.allPermissionDataType.childList][idxArr[1]][this.allPermissionDataType.childList].map(i => i[this.allPermissionDataType.code])
                const hasChild2 = checkedList.some(i => cArr2.includes(i))
                if (!hasChild2) {
                    arr.delete(list[idxArr[0]][this.allPermissionDataType.childList][idxArr[1]][this.allPermissionDataType.code])
                }
                const cArr1 = list[idxArr[0]][this.allPermissionDataType.childList].map(i => i[this.allPermissionDataType.code])
                const hasChild1 = Array.from(arr).some(i => cArr1.includes(i))
                if (!hasChild1) {
                    arr.delete(list[idxArr[0]][this.allPermissionDataType.code])
                }
            }
            return Array.from(arr)
        },
        /**
         * 往下便利数据
         */
        ergodicDownList(list, idxArr = []) {
            const f = idxArr[0]
            let arr = []
            for (let i = 0; i < list.length; i++) {
                if (f === undefined || f === i) {
                    const child = list[i][this.allPermissionDataType.childList]
                        ? this.ergodicDownList(list[i][this.allPermissionDataType.childList], idxArr.slice(1))
                        : []
                    arr = [...arr, list[i][this.allPermissionDataType.code], ...child]
                }
            }
            return arr
        },
        /**
         * 全选
         */
        selectChildsAll(idxArr = []) {
            const list = this.allPermission
            let val = []
            val = this.ergodicDownList(list, idxArr)
            return val
        },
        /**
         * 上选 -> 下全选
         */
        chooseChildsAll(list, idxArr = []) {
            let val = []
            val = this.ergodicDownList(list, idxArr)
            return val
        },
        /**
         * 下选 -> 上级所有选中
         */
        addErgodicItem(list, idxArr = []) {
            let val = new Set()
            const item = list[idxArr[0]]
            const newIdx = idxArr.slice(1)
            val.add(item[this.allPermissionDataType.code])
            if (item[this.allPermissionDataType.childList] && newIdx.length) {
                val.add(...this.addErgodicItem(item[this.allPermissionDataType.childList], newIdx))
            }
            return val
        },
        /**
         * 上不选 -> 下全不选
         */
        removeErgodicItem(list, idxArr = []) {
            const set = new Set(this.checkedList)
            if (idxArr.length === 2) {
                try {
                    list[idxArr[0]][this.allPermissionDataType.childList][idxArr[1]][this.allPermissionDataType.childList].forEach(item => {
                        set.delete(item[this.allPermissionDataType.code])
                    })
                } catch (err) {
                }
            } else if (idxArr.length === 1) {
                for (let index in list[idxArr[0]][this.allPermissionDataType.childList]) {
                    let code = list[idxArr[0]][this.allPermissionDataType.childList][index][this.allPermissionDataType.code]
                    if (!this.checkedList.includes(code)) {
                        let arr = this.chooseChildsAll(list, idxArr)
                        arr.forEach(item => set.add(item))
                        return Array.from(set)
                    }
                }
                const child = list[idxArr[0]]
                set.delete(child[this.allPermissionDataType.code])
                if (child[this.allPermissionDataType.childList] && child[this.allPermissionDataType.childList].length) {
                    child[this.allPermissionDataType.childList].forEach(Ritem => {
                        set.delete(Ritem[this.allPermissionDataType.code])
                        if (Ritem[this.allPermissionDataType.childList]) {
                            Ritem[this.allPermissionDataType.childList].forEach(Iitem => {
                                set.delete(Iitem[this.allPermissionDataType.code])
                            })
                        }
                    })
                }
            }
            return Array.from(set)
        },

}
}
</script>

```

### **三列表格(仅展示)**
```
<template>
    <div class="permission">
        <el-checkbox-group
            :value="hasPermission"
        >
            <template v-for="(Ritem, Ridx) in allPermission">
                <div
                    class="check_item_box rflex"
                    :key="Ritem[allPermissionDataType.code]"
                >
                    <div class="parent_box border_box rflex flex_align_items_center">
                        <el-checkbox
                            :label="Ritem[allPermissionDataType.code]"
                            :readonly="true"
                        >
                            {{ Ritem[allPermissionDataType.name] }}
                        </el-checkbox>
                    </div>
                    <div class="border_box cflex flex_1">
                        <div
                            v-for="(Iitem, Iidx) in Ritem[allPermissionDataType.childList]"
                            v-if="Array.isArray(Ritem[allPermissionDataType.childList]) && Ritem[allPermissionDataType.childList].length"
                            class="border_box last_item_border_none rflex flex_1"
                        >
                            <div
                                :key="Iitem[allPermissionDataType.code]"
                                class="parent_box border_box rflex flex_align_items_center"
                            >
                                <div class="item_container">
                                    <el-checkbox
                                        :label="Iitem[allPermissionDataType.label]"
                                    >
                                        {{ Iitem[allPermissionDataType.name] }}
                                    </el-checkbox>
                                </div>
                            </div>
                            <div
                                class="children_container rflex flex_wrap"
                                v-if="Array.isArray(Iitem[allPermissionDataType.childList]) && Iitem[allPermissionDataType.childList].length"
                            >
                                <template v-for="(Sitem, Sidx) in Iitem[allPermissionDataType.childList]">
                                    <div
                                        :key="Sitem[allPermissionDataType.code]"
                                        class="children_row"
                                    >
                                        <div class="item_container">
                                            <el-checkbox
                                                :label="Sitem[allPermissionDataType.label]"
                                            >
                                                {{ Sitem[allPermissionDataType.name] }}
                                            </el-checkbox>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </el-checkbox-group>
    </div>
</template>

```

Leanote's Blog

Navigation

Recent Posts

Friend Links