CellWrapper.vue

<template>
  <div class="home-cell">
    <CellHeader :title="title">
      <slot name="header"></slot>
    </CellHeader>
    <div class="cell-content" :style="{ height: cellContentHeight + 'px' }">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import CellHeader from "./CellHeader.vue";

export default {
  name: "CellWrapper",
  components: { CellHeader },
  props: {
    title: {
      type: String,
      required: true,
    },
    cellContentHeight: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.home-cell {
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 8px;
  padding-bottom: 10px;
}
.home-cell::before {
  display: table;
  content: "";
}
.home-cell >>> .el-scrollbar__wrap {
  overflow-y: scroll;
  overflow-x: auto;
}
</style>