U 日志页面表格高度

he wei

2022-09-02 234715b88b0ad6ff64f9d670c3bda93eaff75a97

U 日志页面表格高度

 src/pages/system/logs/list.vue

@@ -1,42 +1,52 @@
<template>
  <div>
    <!-- title="用户列表" -->
    <advance-table
      :columns="columns"
      :data-source="dataSource"
      :loading="loading"
      title="日志"
      rowKey="num"
      table-layout="fixed"
      @search="onSearch"
      @refresh="onRefresh"
      :format-conditions="true"
      @reset="onReset"
      :pagination="{
        current: pageCurr,
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        showLessItems: true,
        showQuickJumper: true,
        showTotal: (total, range) =>
          `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
        onChange: onPageChange,
        onShowSizeChange: onSizeChange,
      }"
    >
    </advance-table>
  <div class="main">
    <div class="inner" ref="wraper">
      <a-card>
        <!-- title="用户列表" -->
        <advance-table
          ref="table"
          class="doc-center-table"
          :columns="columns"
          :data-source="dataSource"
          :loading="loading"
          title="日志"
          rowKey="num"
          table-layout="fixed"
          @search="onSearch"
          @refresh="onRefresh"
          :scroll="{ x: 1900, y }"
          :format-conditions="true"
          @reset="onReset"
          :pagination="{
            current: pageCurr,
            pageSize: pageSize,
            total: total,
            showSizeChanger: true,
            showLessItems: true,
            showQuickJumper: true,
            showTotal: (total, range) =>
              `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
            onChange: onPageChange,
            onShowSizeChange: onSizeChange,
          }"
        >
        </advance-table>
      </a-card>
    </div>
  </div>
</template>

<script>
import AdvanceTable from "@/components/table/advance/AdvanceTable";
import { getAllLogs, getOperate } from "./apis";
import { mapGetters } from "vuex";
export default {
  name: "",

  data() {
    return {
      update: -1,
      y: 600,
      loading: false,
      pageCurr: 1,
      pageSize: 10,
@@ -86,6 +96,43 @@
  components: {
    AdvanceTable,
  },
  computed: {
    ...mapGetters("setting", ["affixed"]),
  },
  watch: {
    update(n) {
      if (-1 != n) {
        this.$nextTick(() => {
          const table = this.$refs.table;
          const header = document.querySelectorAll(
            ".doc-center-table .ant-table-header"
          )[0].clientHeight;
          const bar = document.querySelectorAll(".header-bar")[0].clientHeight;
          if (table.fullScreen) {
            this.y = table.$el.clientHeight - bar - header - 64;
          } else {
            const wraper = this.$refs.wraper.clientHeight;
            const card = document.querySelectorAll(".ant-card-body")[0];
            const { paddingBottom, paddingTop } = getComputedStyle(card, null);
            const h =
              wraper -
              header -
              64 -
              bar -
              parseInt(paddingBottom) -
              parseInt(paddingTop);
            // console.log(h, "h",wraper, header, bar );
            this.y = h;
          }
        });
      }
    },
    affixed() {
      setTimeout(() => {
        this.update = Math.random();
      }, 200);
    },
  },
  methods: {
    getList() {
      this.loading = true;
@@ -126,6 +173,9 @@
        }
        this.dataSource = data;
        this.total = total;
        if (-1 == this.update) {
          this.update = Math.random();
        }
      });
    },
    onSearch(conditions, searchOptions) {
@@ -179,14 +229,37 @@
        this.setColSelectOptions("操作类别", data);
      });
    },
    resize() {
      setTimeout(() => {
        this.update = Math.random();
      }, 200);
    },
    activeFN() {
      this.resize();
    },
  },

  mounted() {
    this.getOperate();
    this.getList();
    window.addEventListener("resize", this.resize);
  },
  destroyed() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>

<style scoped lang="less">
.main {
  height: 100%;
  position: relative;
  .inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}
</style>

 src/pages/user/list.vue

@@ -309,6 +309,9 @@
        this.update = Math.random();
      }, 200);
    },
    activeFN() {
      this.resize();
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.resize);