logpm_page/src/views/wel/Tip.vue

<template>
  <div class="tip_container">
    <slot></slot>

    <div class="mask" v-if="isShow">
      <tablecmt
        style="max-height: 500px"
        :columnList="columnList"
        :tableData="tableData"
        :loading="loading"
        :isInitHeigt="false"
      ></tablecmt>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const props = defineProps({
  /** 是否显示 */
  isShow: {
    type: Boolean,
    default: true,
  },

  /** 是否在消失后保留dom */
  isDistory: {
    type: Boolean,
    required: false,
    default: true,
  },

  /** 表格表头 */
  columnList: {
    type: Array,
    required: true,
  },

  /** 表格数据 */
  tableData: {
    type: Array,
    required: true,
  },

  /** 请求loading */
  loading: {
    type: Boolean,
    required: false,
    default: false,
  },
});

const details = reactive({});
</script>

<style lang="scss" scoped>
.tip_container {
  position: relative;
}

.mask {
  position: absolute;
  top: calc(100% + 10px);
  width: 50vw;
  background-color: #fff;
  padding: 10px;
  box-shadow: 5px 5px 5px 5px #172e6080;
  border-radius: 5px;
  //   border: 1px solid var(--el-color-primary);
}
</style>