1、优化代码：mdc全局页面表格区域内容若需滚动无需翻至最底部且部分页面竖向滚动会滚动整个页面调整为仅滚动表格区域，表格操作列右固定以满足不同分辨率下...

zhuzhuanzhuan

2024-01-12 120cf05bfd146a9bd1c011c9dd0244a57d0dea64

 src/views/mdc/base/modules/deviceBaseInfo/EquipmentList.vue

@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false">
  <a-card :bordered="false" style="display: flex;flex-direction: column">

    <!-- 查询区域 -->
    <!--<div class="table-page-search-wrapper">-->
@@ -48,7 +48,7 @@
      <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
    <!--</div>-->

    <div class="equipmentList">
    <div class="equipmentList" id="DeviceList">
      <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
        <!--<i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{-->
        <!--selectedRowKeys.length }}</a>项&nbsp;&nbsp;-->
@@ -56,8 +56,7 @@
      <!--</div>-->

      <a-table ref="table" bordered size="middle" rowKey="equipmentId" :columns="columns" :dataSource="dataSource"
               :pagination="false" :loading="loading"
      style="height: 100%; overflow-y: scroll;">
               :pagination="false" :loading="loading" :scroll="{x:'max-content',y:scrollY}">
      </a-table>
    </div>
  </a-card>
@@ -79,25 +78,30 @@
            title: '设备ID',
            align: "center",
            dataIndex: 'equipmentId',
            width:250
          },
          {
            title: '设备名称',
            align: "center",
            dataIndex: 'equipmentName',
            width:300
          },
          {
            title: '状态',
            align: "center",
            dataIndex: 'oporationDict',
            width:150
          },
          {
            title: '采集时间',
            align: "center",
            dataIndex: 'collecttime',
            defaultSortOrder:'descend',
            sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1}
            sorter: (a, b) => {return a.collecttime>b.collecttime?1:-1},
            width:350
          },
        ],
        scrollY:465,
      }
    },
    props: { dataSource: {
@@ -108,38 +112,47 @@
    watch: {
    },
    methods: {
    }
      handleWindowResize(){
        const boxHeight = +window.getComputedStyle(document.getElementById('DeviceList')).height.slice(0,-2)
        const tableHeadHeight = +window.getComputedStyle(document.querySelector('.ant-table-thead th')).height.slice(0,-2)
        this.scrollY = boxHeight - tableHeadHeight
      }
    },
    mounted(){
      window.addEventListener('resize',this.handleWindowResize)
      this.handleWindowResize()
    },
  }
</script>
<style scoped>
  .equipmentList{
    flex: 1;
    overflow: hidden;
  }

  @media screen and (min-width: 1920px){
    .equipmentList{
      height: 640px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .equipmentList{
      height: 640px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .equipmentList{
      height: 493px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .equipmentList{
      height: 493px!important;
      overflow: scroll;
    }
  }
  @media screen and (max-width: 1280px){
    .equipmentList{
      height: 394px!important;
      overflow: scroll;
    }
  }