20240419

riku

2024-04-19 ce51d7719b4d908da5577751f0c840fab5d1a39e

 src/components/table/FYTable.vue

@@ -4,6 +4,9 @@
      <template #options>
        <slot name="options"></slot>
      </template>
      <template #buttons>
        <slot name="buttons"></slot>
      </template>
    </FYSearchBar>
  </el-row>
  <el-row ref="expandRef">
@@ -58,18 +61,18 @@
      currentPage: 1,
      pageSize: 20,
      loading: false
    }
    };
  },
  emits: ['search'],
  watch: {
    currentPage(nValue, oValue) {
      if (nValue != oValue) {
        this.onSearch()
        this.onSearch();
      }
    },
    pageSize(nValue, oValue) {
      if (nValue != oValue) {
        this.onSearch()
        this.onSearch();
      }
    }
  },
@@ -80,7 +83,7 @@
     * 回调函数接收一个对象，包括表格数据数组data和数据总数total
     */
    onSearch() {
      this.loading = true
      this.loading = true;
      this.$emit(
        'search',
        {
@@ -88,37 +91,37 @@
          pageSize: this.pageSize
        },
        (res) => {
          this.tableData = res.data
          this.total = res.total ? res.total : 0
          this.loading = false
          this.tableData = res.data;
          this.total = res.total ? res.total : 0;
          this.loading = false;
        }
      )
      );
    },
    calcTableHeight() {
      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 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;
      // 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)`
      return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
    },
    tableRowClassName({ row }) {
      if (this.rowClassName) {
        if (typeof this.rowClassName == 'string') {
          return this.rowClassName
          return this.rowClassName;
        } else if (typeof this.rowClassName == 'function') {
          return this.rowClassName({ row })
          return this.rowClassName({ row });
        }
      } else {
        return row.extension1 != '0' ? 'online-row' : 'offline-row'
        return row.extension1 != '0' ? 'online-row' : 'offline-row';
      }
    }
  },
  mounted() {
    this.tableHeight = this.calcTableHeight()
    this.onSearch()
    this.tableHeight = this.calcTableHeight();
    this.onSearch();
  }
}
};
</script>

<style>