<template>
    <div class="flex just-end pointer">
        <span></span>
        <el-popover placement="bottom" trigger="click" teleported>
            <template #reference>
                <el-icon :size="20">
                    <Setting />
                </el-icon>
            </template>
            <el-checkbox-group v-model="checkList" @change="onChange">
                <el-checkbox v-for="item in props.configer" :label="item.prop || item.key" :key="item">{{ item.label
                    }}</el-checkbox>
            </el-checkbox-group>
        </el-popover>
    </div>
</template>
<script setup>
import { ref, nextTick, watchEffect } from "vue"

const props = defineProps({
    //外部传入列数据 [{
    //     label: "label",
    //     prop: "prop", 必传
    //     key:"key",如果是多级表头，父级表头必须传递key
    //     .....
    // },.....]
    configer: Array,
})
const emits = defineEmits(["change"])
const checkList = ref([])

watchEffect(() => {
    //初始全部选中
    nextTick(() => {
        checkList.value = props.configer.map(item => item.prop || item.key)
    })
})
const onChange = val => {
    emits("change", val)
}
</script>