PowerAnalysis_blue/src/views/dataAnalysis/lineAnalysis/components/table.vue

<script setup name="table">
import { computed, ref } from 'vue';

const props = defineProps({
  height: {
    type: String,
    default: '800px'
  },
  data: {
    type: Array,
    default: () => ([]),
  },
  column: {
    type: Array,
    default: () => ([]),
  },
  tableName: {
    type: String,
    default: '',
  },
  tableId: {
    type: String,
    default: '',
  },
  loading: {
    type: Boolean,
    default: false,
  }
})
const emits = defineEmits(['export'])
const funExport = () => {
  emits('export')
}
const tableRef = ref('')
const tableHeight =  computed(() => {
  return tableRef.value.offsetHeight? tableRef.value.offsetHeight - 46 : 739
})
</script>
<template>
  <div ref="tableRef" class=""
    :style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
    <div class="flex justify-between items-center pb-[10px]">
      <h3>{{ props.tableName }}</h3>
      <!-- <el-button size="small" type="primary" @click="funExport" :disabled="!props.tableId">数据导出</el-button> -->
    </div>
    <el-table stripe :data="props.data" size="small" v-loading="props.loading" :max-height="tableHeight"
      :style="{ width: '100%' }">
      <el-table-column align="center" show-overflow-tooltip v-for="item in props.column" :prop="item.prop"
        :label="item.label" sortable resizable :min-width="item.width ? item.width : 80" />
    </el-table>
  </div>
</template>