2026.3.4

riku

2026-03-04 49e2b7ea866695957633855f71f9e2f943b11ec7

 src/components/table/FYTable.vue

@@ -1,4 +1,5 @@
<template>
  <div>
  <el-row ref="searchRef">
    <FYSearchBar @search="onSearch">
      <template #options v-if="$slots.options">
@@ -75,30 +76,30 @@
    cellClassName: Function || String,
    pagination: {
      type: Boolean,
      default: true
      default: true,
    },
    // '' | 'small' | 'default' | 'large'
    size: {
      type: String,
      default: 'default'
      default: 'default',
    },
    data: {
      type: Array,
      default: () => []
      default: () => [],
    },
    totalCount: {
      type: Number,
      default: 0
      default: 0,
    },
    defaultPageSize: {
      type: Number,
      default: 20
      default: 20,
    },
    // 额外的高度，用于计算表格高度
    extraHeight: {
      type: Number,
      default: 0
    }
      default: 0,
    },
  },
  data() {
    return {
@@ -108,46 +109,46 @@
      currentPage: 1,
      pageSize: this.defaultPageSize,
      loading: false,
      fontSize: 'default'
    };
      fontSize: 'default',
    }
  },
  emits: ['search', 'cellClick', 'tablePaste', 'sortChange'],
  watch: {
    currentPage(nValue, oValue) {
      if (nValue != oValue) {
        this.onSearch();
        this.onSearch()
      }
    },
    pageSize(nValue, oValue) {
      if (nValue != oValue) {
        this.onSearch();
        this.onSearch()
      }
    },
    size: {
      handler(nValue, oValue) {
        if (nValue != oValue) {
          this.fontSize = nValue;
          this.fontSize = nValue
        }
      },
      immediate: true
      immediate: true,
    },
    data(nValue, oValue) {
      if (nValue != oValue) {
        this.tableData = nValue;
        this.tableData = nValue
      }
    },
    totalCount(nValue, oValue) {
      if (nValue != oValue) {
        this.total = nValue;
        this.total = nValue
      }
    },
    extraHeight: {
      handler(nValue, oValue) {
        if (nValue != oValue) {
          this.tableHeight = this.calcTableHeight();
          this.tableHeight = this.calcTableHeight()
        }
      }
    }
      },
    },
  },
  computed: {},
  methods: {
@@ -157,73 +158,71 @@
     * 回调函数接收一个对象，包括表格数据数组data和数据总数total
     */
    onSearch() {
      this.loading = true;
      this.loading = true
      this.$emit(
        'search',
        {
          currentPage: this.currentPage,
          pageSize: this.pageSize
          pageSize: this.pageSize,
        },
        (res) => {
          if (res) {
            if (res.data) {
              this.tableData = res.data;
              this.tableData = res.data
            }
            if (res.total) {
              this.total = res.total;
              this.total = res.total
            }
          }
          this.loading = false;
          this.doLayout();
        }
      );
          this.loading = false
          this.doLayout()
        },
      )
    },
    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 h4 = this.$refs.expand2Ref.offsetHeight;
      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 + this.extraHeight;
      return this.contentMaxHeight.value - h + 'px';
      const h = h1 + h2 + h3 + h4 + this.extraHeight
      return this.contentMaxHeight - h + 'px'
      // 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'
      }
    },
    cellClick(row, column, cell, event) {
      this.$emit('cellClick', row, column, cell, event);
      this.$emit('cellClick', row, column, cell, event)
    },
    handlePaste(event) {
      this.$emit('tablePaste', event);
      this.$emit('tablePaste', event)
    },
    doLayout() {
      this.$refs.tableRef.doLayout();
      this.$refs.tableRef.doLayout()
    },
    handleSortChange({ column, prop, order }) {
      this.$emit('sortChange', { column, prop, order });
      this.$emit('sortChange', { column, prop, order })
    },
    clearSort() {
      this.$refs.tableRef.clearSort();
    }
      this.$refs.tableRef.clearSort()
    },
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = this.calcTableHeight();
    }, 100);
    this.onSearch();
  }
};
      this.tableHeight = this.calcTableHeight()
    }, 100)
    this.onSearch()
  },
}
</script>

<style>