limsTable表格自适应高度&手动下单调整

zouyu

2026-04-28 3115fcc80036ec4bfe3a2cd1128c5fdc82a01f42

 src/components/Table/lims-table.vue

@@ -2,11 +2,11 @@
  <div>
    <!-- 表格 -->
    <el-table ref="multipleTable" v-loading="tableLoading" :border="border" :data="tableData"
      :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" :height="height"
      :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" :height="tableHeight"
      :highlight-current-row="highlightCurrentRow" :row-class-name="rowClassName" :row-style="rowStyle"
      :row-key="rowKey" :span-method="spanMethod" :show-summary="showSummary" :summary-method="summaryMethod" stripe style="width: 100%" tooltip-effect="dark" @row-click="rowClick"
      @current-change="currentChange" @selection-change="handleSelectionChange" class="lims-table">
      <el-table-column align="center" type="selection" width="55" v-if="isSelection" />
      <el-table-column align="center" type="selection" width="55" :selectable="selectionSelectable" v-if="isSelection" />
      <el-table-column align="center" label="序号" type="index" width="60" :index="indexMethod" />

      <el-table-column v-for="(item, index) in column" :key="index" :column-key="item.columnKey"
@@ -186,8 +186,12 @@
      default: false,
    },
    height: {
      type: String,
      default: null,
      type: Number,
      default: 0,
    },
    more:{
      type:Boolean,
      default: false,
    },
    tableLoading: {
      type: Boolean,
@@ -198,6 +202,10 @@
      default: () => {
        return () => { };
      },
    },
    selectionSelectable: {
      type: Function,
      default: () => true,
    },
    rowClick: {
      type: Function,
@@ -275,10 +283,22 @@
      btnWidth: "120px",
      uploadRefs: [],
      currentFiles: {}, // 用于存储每行的当前文件
      uploadKeys: {} // 用于动态重置组件
      uploadKeys: {}, // 用于动态重置组件
      tableHeight:0,
      resizeHandler: null, // 防抖函数引用
    };
  },
  created(){
    this.calcTableHeight()
    this.resizeHandler = this.debounce(() => {
      this.calcTableHeight();
    }, 200);
  },
  beforeDestroy(){
    window.removeEventListener("resize",this.resizeHandler)
  },
  mounted() {
    window.addEventListener("resize",this.resizeHandler)
    this.calculateSpanInfo();
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout();
@@ -295,16 +315,44 @@
        this.tableData.forEach((_, index) => {
          this.$set(this.uploadKeys, index, Date.now());
        });
        this.$nextTick(() => {
          if (this.$refs.multipleTable) {
            this.$refs.multipleTable.doLayout();
          }
        });
        this.refreshTableLayout();
      },
      immediate: true
    }
    },
    more() {
      this.refreshTableLayout();
    },
    height() {
      this.refreshTableLayout();
    },
  },
  methods: {
    refreshTableLayout() {
      this.$nextTick(() => {
        this.calcTableHeight();
        if (this.$refs.multipleTable) {
          this.$refs.multipleTable.doLayout();
        }
      });
    },
    calcTableHeight(){
      const innerHeight = window.innerHeight;
      const naviHeight = 96;//导航栏高度
      const pageHeight = this.page?52:0;//分页组件高度
      const mainMarginHeight = 40;//主组件上下间距
      const otherHeight = this.height;//其余高度
      const searchHeight = this.more?101:51;//搜索栏高度

      this.tableHeight = innerHeight - naviHeight - pageHeight - mainMarginHeight - otherHeight - searchHeight
    },
    //防抖函数
    debounce(fn, delay) {
      let timer = null;
      return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
      };
    },
    getWidth(row, row0) {
      let count = 0;
      row.forEach((a) => {