src/components/table/FYTable.vue
@@ -9,18 +9,34 @@
      </template>
    </FYSearchBar>
  </el-row>
  <el-row ref="expandRef">
    <slot name="options-expand"></slot>
  <el-row ref="expandRef" justify="space-between">
    <el-col span="22">
      <slot name="options-expand"></slot>
    </el-col>
    <el-col span="2">
      <el-space :wrap="false">
        <el-text size="small">字体</el-text>
        <el-radio-group v-model="fontSize" size="small">
          <el-radio-button value="small">小</el-radio-button>
          <el-radio-button value="default">中</el-radio-button>
          <el-radio-button value="large">大</el-radio-button>
        </el-radio-group>
      </el-space>
    </el-col>
  </el-row>
  <div ref="expand2Ref">
    <slot name="options-expand2"></slot>
  </div>
  <el-table
    :data="tableData"
    v-loading="loading"
    table-layout="fixed"
    :row-class-name="tableRowClassName"
    :height="tableHeight"
    :size="fontSize"
    border
  >
    <slot name="table-column"></slot>
    <slot name="table-column" :size="fontSize"></slot>
  </el-table>
  <el-pagination
@@ -51,6 +67,11 @@
    pagination: {
      type: Boolean,
      default: true
    },
    // '' | 'small' | 'default' | 'large'
    size: {
      type: String,
      default: 'default'
    }
  },
  data() {
@@ -60,7 +81,8 @@
      total: 0,
      currentPage: 1,
      pageSize: 20,
      loading: false
      loading: false,
      fontSize: 'default'
    };
  },
  emits: ['search'],
@@ -73,6 +95,30 @@
    pageSize(nValue, oValue) {
      if (nValue != oValue) {
        this.onSearch();
      }
    },
    size: {
      handler(nValue, oValue) {
        if (nValue != oValue) {
          this.fontSize = nValue;
        }
      },
      immediate: true
    }
  },
  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';
      }
    }
  },
@@ -101,7 +147,9 @@
      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 h = h1 + h2 + h3;
      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)`;
    },