element全选

<template>

    <div>

        <el-dialog title="编辑权限" :visible.sync="dialogVisible" width="900px" center append-to-body

            :close-on-click-modal="false">

            <div class="itemsstyle">

                <div class="test" v-for="(item, index) in drawerList" :key="index"

                    style="margin-top: 20px;display: flex;align-items: center;">

                    <div style="display: flex;align-items: center;">

                        <span style="font-size: 18px;">抽屉{{ index + 1 }}</span>

                        <div style="display: flex;align-items: center;">

                            <el-checkbox v-model="item.isCheckAll" :indeterminate="item.isIndeterminate" @change="(c) =>

                                handleCheckAllChange(

                                    c,

                                    item.checkIds,

                                    item.indeterminate,

                                    index

                                )

                                " style="margin: 0 30px 0 10px;">全选</el-checkbox>

                            <el-checkbox-group v-model="item.value"

                                @change="(c) => handleCheckedCitiesChange(c, item, index)">

                                <el-checkbox v-for="ce in item.darList" :label="ce.id" :key="ce.id" border>

                                    {{ ce.displayName }}

                                </el-checkbox>

                            </el-checkbox-group>

                        </div>

                    </div>

                </div>

                <div style="display: flex;align-items: center;margin-top: 20px;">

                    <el-button type="primary" @click="submitForm('formLabelAlign')"

                        style="margin-right: 10px;">提交</el-button>

                    <el-button @click="checkAll">全选</el-button>

                    <el-button @click="notCheckAll">取消全选</el-button>

                </div>

            </div>

        </el-dialog>

    </div>

</template>

<script>

export default {

    data() {

        return {

            id: null,

            dialogVisible: false,

            drawerList: [],

            allData: [],

            isIndeterminate: true,

            // checkAll: false,

        }

    },

    methods: {

        getAll() {

            this.$interface.materialCabinet.getDrawerAll().then((res) => {

                console.log(res.data)

                // this.drawerList = res.data.data

                res.data.data.forEach((v) => {

                    this.drawerList.push({

                        value: [],

                        darList: [...v],

                        checkIds: [...v.map((c) => c.id)],

                    });

                });

                console.log(res.data.data, 'res.data.data');

            });

        },

        handleCheckAllChange(value, checkIds, indeterminate, index) {

            const tag = this.drawerList.find((c, i) => i === index);

            if (value) {

                tag.value = checkIds;

                tag.isIndeterminate = false;

            } else tag.value = [];

        },

        handleCheckedCitiesChange(value, item, index) {

            const tag = this.drawerList.find((c, i) => i === index);

            let checkedCount = value.length;

            tag.isCheckAll = checkedCount === item.checkIds.length;

            tag.isIndeterminate = checkedCount > 0 && checkedCount < item.checkIds.length;

        },

        checkAll() {

            this.drawerList.forEach((v) => {

                v.value = [...v.checkIds];

                v.isCheckAll = true;

                v.isIndeterminate = false;

            });

        },

        notCheckAll() {

            this.drawerList.forEach((v) => {

                v.value = [];

                v.isCheckAll = false;

                v.isIndeterminate = false;

            });

        },

        submitForm() {

            // if (this.allData.length <= 0) {

            //     this.$notify({

            //         title: '提示',

            //         message: '至少选中一个抽屉',

            //         type: 'warning'

            //     });

            //     return

            // }

            const checkAllIds = this.drawerList.reduce((pre, cur) => {

                cur.value?.length && pre.push(...cur.value);

                return pre;

            }, []);

            let params = {

                id: this.id,

                ids: [...checkAllIds]

            }

            this.$interface.materialCabinet.guiZiQuanXian(params).then((res) => {

                if (res.data.statusCode === 200) {

                    this.$message({

                        type: "success",

                        message: "操作成功!",

                    });

                    this.dialogVisible = false

                    this.drawerList = []

                    this.$emit('load')

                }

            });

            console.log(this.allData, 'allData');

        }

    }

}

</script>

<style>

.itemsstyle {

    display: flex;

    justify-content: center;

    flex-direction: column;

    align-items: center;

    width: 100%;

    /* background-color: red; */

    /* margin-bottom: 30px; */

    padding-bottom: 30px;

    box-sizing: border-box;

}

</style>