jn_sis_zhfx/src/views/economicsOperation/photovoltaicAnalyse/powerAnalyse/components/table.vue

<script setup name="table">
import { ref, computed, defineProps, defineEmits } 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 - 12 : 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
      :data="props.data"
      stripe
      size="small"
      v-loading="props.loading"
      :height="height"
      :style="{ width: '100%' }"
    >
      <el-table-column
        header-align="center"
        :align="index < 2 ? 'center' : 'right'"
        show-overflow-tooltip
        v-for="(item, index) in props.column"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        sortable
        resizable
        :min-width="item.width ? item.width : 80"
      />
    </el-table>
  </div>
</template>