<template>
  <div class="my_Cascader">
    <slot name="content">
        <div></div>
    </slot>
    <el-popover placement="bottom" popper-class="myCascader_popover" trigger="click">
      <div class="myCascader">
        <el-cascader-panel
          v-bind="$attrs"
          v-on="$listeners"
          :props="props"    
        ></el-cascader-panel>
      </div>
        <template #reference="scopeData">
            <slot name="reference" v-bind="scopeData || {}"></slot>
        </template>
    </el-popover>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    props:{
        type:Object,
        default:()=>{
            return {
                label:'label',
                value:'value',
                children:'children'
            }
        }
    }
  },
  data() {
    return {
        chose:['1']
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
  },
  methods: {},
};
</script>
<style lang="scss">
.myCascader{
  .el-cascader-panel.is-bordered {
    border: none;
  }
  .el-cascader-menu{
    height: auto !important;
    min-height: 100px;
  }
}
.myCascader_popover{
    padding: 0 !important;
}
</style>
<style lang="scss" scoped>

.myCascader {
    max-height: 300px;
    min-height: 100px;
    overflow: auto;
}
.my_Cascader{
    display: flex;
    flex-wrap: wrap;
}
</style>