<!--
含有滚动条的卡片，一般是页面横向包含两列或以上卡片布局才需要用到此组件，为了保证各卡片等高
@Author: linqian
@Date: 2021-11-11 14:55
-->
<template>
  <dg-col :span="colSpan">
    <dg-card>
      <template slot="header" v-if="$slots.cardHeader || header">
        <div>{{ header }}</div>
        <slot name="cardHeader"></slot>
      </template>
      <div :style="{ height: contentHeight }">
        <dg-scrollbar>
          <slot />
        </dg-scrollbar>
      </div>
    </dg-card>
  </dg-col>
</template>

<script>
export default {
  props: {
    colSpan: {
      type: Number,
      default: 12
    },
    header: String,
    contentHeight: {
      type: String,
      default: 'calc(100vh - 15.5rem)'
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>

<style lang='scss'>
</style>