<template>
  <div>
    <el-popover placement="bottom-start" :visible="visible" :width="750">
        <!-- 配置列面板 -->
        <transition name="fade">
           <div>
                <div>选择显示字段</div>
                <div class="check">
                    <el-checkbox v-model="item.flag" v-for="(item) in showColumnArr" :key="item.code">{{item.label}}</el-checkbox>
                </div>
           </div>
        </transition>
        <template #reference>
            <i class="el-icon-s-operation" style="font-size: 20px; cursor: pointer" @click="toggle"  />
        </template>
    </el-popover>
  </div>
</template>

<script>
export default {
    name:'popover',
    props:['visible','showColumnArr'],
    methods:{
        toggle(){
            this.$emit('toggle')
        }
    }
}
</script>

<style scoped>
    .check {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .check .el-checkbox {
        width: 200px;
        /* flex: 0 0 30%; */
    }
</style>