1. 编写设备匹配功能

riku

2024-09-09 dc4ba8076aebd30f33282121a414262b4d4919f4

 src/components/table/FYTable.vue

@@ -4,20 +4,27 @@
      <template #options>
        <slot name="options"></slot>
      </template>
      <template #buttons>
        <slot name="buttons"></slot>
      </template>
    </FYSearchBar>
  </el-row>

  <el-row ref="expandRef">
    <slot name="options-expand"></slot>
  </el-row>
  <el-table
    :data="tableData"
    v-loading="loading"
    table-layout="fixed"
    :row-class-name="tableRowClassName"
    :height="tableHeight"
    border
  >
    <slot name="table-column"></slot>
  </el-table>

  <el-pagination
    v-if="pagination"
    ref="paginationRef"
    class="el-pagination"
    v-model:current-page="currentPage"
@@ -41,6 +48,10 @@
export default {
  props: {
    rowClassName: undefined,
    pagination: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
@@ -49,7 +60,7 @@
      total: 0,
      currentPage: 1,
      pageSize: 20,
      loading: false,
      loading: false
    };
  },
  emits: ['search'],
@@ -63,7 +74,7 @@
      if (nValue != oValue) {
        this.onSearch();
      }
    },
    }
  },
  methods: {
    /**
@@ -77,20 +88,22 @@
        'search',
        {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          pageSize: this.pageSize
        },
        (res) => {
          this.tableData = res.data;
          this.total = res.total;
          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 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) {
@@ -102,12 +115,12 @@
      } else {
        return row.extension1 != '0' ? 'online-row' : 'offline-row';
      }
    },
    }
  },
  mounted() {
    this.tableHeight = this.calcTableHeight();
    this.onSearch();
  },
  }
};
</script>