riku
2023-12-14 c37f0db24bcb9c08c11da9cd96e562a84cd66e6a
src/components/table/FYTable.vue
@@ -6,7 +6,9 @@
      </template>
    </FYSearchBar>
  </el-row>
  <el-row ref="expandRef">
    <slot name="options-expand"></slot>
  </el-row>
  <el-table
    :data="tableData"
    v-loading="loading"
@@ -18,6 +20,7 @@
  </el-table>
  <el-pagination
    v-if="pagination"
    ref="paginationRef"
    class="el-pagination"
    v-model:current-page="currentPage"
@@ -41,6 +44,10 @@
export default {
  props: {
    rowClassName: undefined,
    pagination: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
@@ -49,21 +56,21 @@
      total: 0,
      currentPage: 1,
      pageSize: 20,
      loading: false,
    };
      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()
      }
    },
    }
  },
  methods: {
    /**
@@ -72,43 +79,45 @@
     * 回调函数接收一个对象,包括表格数据数组data和数据总数total
     */
    onSearch() {
      this.loading = true;
      this.loading = true
      this.$emit(
        'search',
        {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          pageSize: this.pageSize
        },
        (res) => {
          this.tableData = res.data;
          this.total = res.total;
          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.$el.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 h = h1 + h2 + h3
      // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
      return `calc(100vh - ${h1}px - ${h2}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>