2025.9.18 数据产品（待完成）

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>
@@ -69,6 +69,7 @@
 * 使用时需要在<slot #options>中添加自定义查询选项，在<slot #table-column>中添加自定义表格列，同时实现触发函数search
 */
export default {
  inject: ['contentMaxHeight'],
  props: {
    rowClassName: undefined,
    cellClassName: Function || String,
@@ -86,6 +87,11 @@
      default: () => []
    },
    totalCount: {
      type: Number,
      default: 0
    },
    // 额外的高度，用于计算表格高度
    extraHeight: {
      type: Number,
      default: 0
    }
@@ -130,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: {
    /**
     * 表格数据查询，传递两组参数，分页信息和回调函数
@@ -186,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) {
@@ -220,7 +216,7 @@
  mounted() {
    this.tableHeight = this.calcTableHeight();
    this.onSearch();
  },
  }
};
</script>