zjugis_OA/client/src/views/OaSystem/oaViews/layout/TableLayout.vue

<script setup lang="ts">
interface tableProps {
  columns?: Array<Record<string, any>>
  data: Array<Record<string, any>>
  isLoading?: boolean
}
const props = defineProps<tableProps>()
const emit = defineEmits<{
  (e: 'selection-change', d: any): void
}>()
const { data, isLoading } = toRefs(props)
const tableRef: any = ref(null)
const tableHeight: any = ref(0)
const selectionChangeHandle = (data) => {
  emit('selection-change', data)
}
/** 初始化 */
onMounted(() => {
  tableHeight.value = tableRef.value.clientHeight
})
</script>
<template>
  <div class="table" ref="tableRef">
    <el-table
      v-loading="isLoading"
      :data="data"
      style="width: 100%; height: 100%"
      :cell-style="{ padding: '12px 0' }"
      :style="{ height: tableHeight + 'px' }"
      stripe
      :header-cell-style="{
        background: '#E5F0FB',
        color: '#233755',
        height: '50px'
      }"
      header-cell-class-name="cus-tab-header"
      @selection-change="selectionChangeHandle"
    >
      <slot></slot>
    </el-table>
  </div>
</template>
<style lang="scss">
.cus-tab-header {
  .cell {
    white-space: nowrap;
  }
}
</style>