windLifecontrolPro/src/components/generatingCapacityComponent/excel.vue

<template>
    <div class="excelData" :style="{ height: height, overflow: 'auto' }">
        <el-empty v-if="!data.length" description="暂无数据" />
        <el-checkbox-group size="small" v-model="excelCheckIds" v-if="showCheckbox" @change="funCheckChange">
            <el-checkbox :class="{'!bg-[rgb(236,245,255)]': currentId === item.id}" size="small"
                class="hover:bg-[rgb(245,247,250)] !mr-0 py-[3px]" :label="item.id" v-for="item in data"
                :key="item.name">
                <span
                    class="whitespace-nowrap cursor-pointer font-bold text-[12px] align-middle inline-flex items-center"
                    @click.stop="funExcelChange(item)">
                    <el-icon>
                        <Document />
                    </el-icon>{{ item.name }}
                </span>
            </el-checkbox>
        </el-checkbox-group>
        <div v-else>
            <div class="excelDataNoCheck" v-for="item in data" :key="item.name"
                :class="{'!bg-[rgb(236,245,255)]': currentId === item.id}" @click="funExcelChange(item)">
                <el-icon>
                    <Document />
                </el-icon>{{ item.name }}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            data: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            height: {
                type: String,
                default: () => {
                    return '';
                },
            },
            showCheckbox: {
                type: Boolean,
                default: () => {
                    return false;
                },
            },
            checkIds: {
                type: Array,
                default: () => {
                    return [];
                },
            },
        },
        data() {
            return {
                excelCheckIds: [],
                currentId: ''
            }
        },
        watch: {
            checkIds(newVal, oldVal) {
                this.excelCheckIds = newVal
            }
        },
        methods: {
            funExcelChange(obj) {
                this.currentId = obj.id
                this.$emit('excelChange', obj)
            },
            funCheckChange(checkArr) {
                this.$emit('checkChange', {
                    checkArr,
                    data: this.data
                }) //抛出当前选择checkIds,  和当前的childs数据项
            }
        }
    }
</script>
<style lang="less">
    .excelData {

        .excelDataNoCheck {
            font-size: 14px;
            color: #b7b7b7;
            line-height: 25px;
            height: 25px;
            cursor: pointer;

            .el-icon {
                margin-right: 5px;
                color: #504bb5;
            }
        }

        .excelDataNoCheck:hover {
            background-color: #504bb5;
            color: #fff;
        }
    }
</style>