表格如何占满屏幕

表格占满屏幕：即表格在页面中随高度变化而变化，当无数据或者数据少的时候占满整个页面

效果展示

• 无数据时

• 有数据时

参考代码

//注册table数据
const { tableContext } = useListPage({
  tableProps: {
    api: list,
    columns,
    canResize: false,
    useSearchForm: false,
    actionColumn: {
      width: 120,
      fixed: 'right',
    },
  },
});

const [registerTable, { getDataSource }] = tableContext;

/**
 * 监听窗口变化
 */
function eventResize() {
  window.addEventListener('resize', setHeight);
}

/**
 * 设置高度
 */
function setHeight() {
  //因为页面初始化需要时间，所以需要延迟加载
  setTimeout(() => {
    // 获取当前窗口高度
    let windowHeight = window.innerHeight;
    let dataSource = getDataSource();
    //判断有没有数据
    if(!dataSource || dataSource.length == 0) {
      let tableContent = document.querySelector('.ant-table-content');
      if(tableContent){
        tableContent['style'].height = 'unset';
      }
      let tBody = document.querySelector('.ant-table-tbody');
      if (tBody) {
        //动态设置高度
        tBody['style'].height = windowHeight - 260 + 'px';
      }
    //如果不需要有数据时动态修改高度，直接将else删掉即可
    }else{
      let tableContent = document.querySelector('.ant-table-content');
      if (tableContent) {
        //动态设置高度
        tableContent['style'].height = windowHeight - 260 + 'px';
        tableContent['style'].overflow = 'auto';
      }
    }
  }, 500);
}

onMounted(() => {
  eventResize();
  //第一次没有走监听，需要设置一下高度
  setHeight();
});

//页面销毁之前删除监听
onUnmounted(() => {
  window.removeEventListener('resize', setHeight);
});

注意：因为resize监听的是窗口高度发生变化的时候才会触发，当表格新增、删除等操作时是不会触发的，需要手动触发一下setHeight方法

• 当我们手动设置高度的时候，需要将canResize(自适应高度)设置成false，否则不生效