riku
2025-09-18 c1d2051abc8ca88cd07f0d7c56c0dbf8165d5c33
src/components/table/FYTable.vue
@@ -1,10 +1,10 @@
<template>
  <el-row ref="searchRef">
    <FYSearchBar @search="onSearch">
      <template #options>
      <template #options v-if="$slots.options">
        <slot name="options"></slot>
      </template>
      <template #buttons>
      <template #buttons v-if="$slots.buttons">
        <slot name="buttons"></slot>
      </template>
    </FYSearchBar>
@@ -28,7 +28,7 @@
    <slot name="options-expand2"></slot>
  </div>
  <el-table
    id="fyTable"
    v-bind="$attrs"
    ref="tableRef"
    :data="tableData"
    v-loading="loading"
@@ -40,6 +40,7 @@
    :cell-class-name="cellClassName"
    @paste="handlePaste"
    @sort-change="handleSortChange"
    :show-overflow-tooltip="true"
    border
  >
    <slot name="table-column" :size="fontSize"></slot>
@@ -68,6 +69,7 @@
 * 使用时需要在<slot #options>中添加自定义查询选项,在<slot #table-column>中添加自定义表格列,同时实现触发函数search
 */
export default {
  inject: ['contentMaxHeight'],
  props: {
    rowClassName: undefined,
    cellClassName: Function || String,
@@ -85,6 +87,11 @@
      default: () => []
    },
    totalCount: {
      type: Number,
      default: 0
    },
    // 额外的高度,用于计算表格高度
    extraHeight: {
      type: Number,
      default: 0
    }
@@ -129,26 +136,16 @@
      if (nValue != oValue) {
        this.total = nValue;
      }
    },
    extraHeight: {
      handler(nValue, oValue) {
        if (nValue != oValue) {
          this.tableHeight = this.calcTableHeight();
        }
      },
    }
  },
  computed: {
    cTableHeight() {
      if (this.$refs.searchRef) {
        const h1 = this.$refs.searchRef.$el.offsetHeight;
        const h2 = this.$refs.paginationRef
          ? this.$refs.paginationRef.$el.offsetHeight
          : 0;
        const h3 = this.$refs.expandRef.$el.offsetHeight;
        const h4 = this.$refs.expand2Ref.offsetHeight;
        const h = h1 + h2 + h3 + h4;
        // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
        return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
      } else {
        return '500';
      }
    }
  },
  computed: {},
  methods: {
    /**
     * 表格数据查询,传递两组参数,分页信息和回调函数
@@ -185,9 +182,9 @@
      const h3 = this.$refs.expandRef.$el.offsetHeight;
      const h4 = this.$refs.expand2Ref.offsetHeight;
      const h = h1 + h2 + h3 + h4;
      // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
      return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
      const h = h1 + h2 + h3 + h4 + this.extraHeight;
      return this.contentMaxHeight.value - h + 'px';
      // return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
    },
    tableRowClassName({ row }) {
      if (this.rowClassName) {