vue动态调整表格的大小适配

如下案例

HTML

 <div class="page-container> 
      <div class="pay-table-all-set">
        <div class="pay-left"></div>
        <div class="pay-footer"></div>
        <div class="pay-right"></div>
      </div>
 </div>

JS 

mounted() {
    this.setTableAllSet();
    const that = this;
    window.addEventListener('resize',  ()=> {
      that.setTableAllSet();
    });
  },
  beforeDestroy(){
    window.removeEventListener('resize', ()=> {
      that.setTableAllSet();
    })
  },
methods(){
    setTableAllSet() {
      const pageContainer = document.querySelector('.page-container');
      const tableAllSet = document.querySelector('.pay-table-all-set');
      const payFooter = document.querySelector('.pay-footer');
      const width = pageContainer.offsetWidth;

      if (tableAllSet) {
        tableAllSet.style.width = width + 'px';
      }

      if(payFooter){
        payFooter.style.width = (width - 280 * 2) + 'px';
      }

      setTimeout(()=>{
        const flag = this.justTableChildren();
        if(!flag){
         tableAllSet.style.zIndex = '0';
        }else{
         tableAllSet.style.zIndex = '8';
        }
      },100);
    },
    justTableChildren(){
      const element = document.querySelector('.pay-table-all-set');
      if (element && element.childElementCount > 0) {
          return true;
      } else {
          return false;
      }
    },
}

原文地址：https://blog.csdn.net/qq_24147051/article/details/143772204

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！