vxe-table表格父级元素根据需求设置宽高

1. 问题

        vxe-table表格父级元素未设置宽高，导致初始进入时表格内数据一列一列向下呈现动态递增，或者无表格数据时表格显示异常。

2.vxe-table 表格

   vxe-table 是一个基于 Vue.js 的表格组件，它提供了丰富的功能和灵活的配置选项。在使用 vxe-table 时，确实需要确保其父级元素具有明确的宽度和高度，以便表格能够正确地渲染和布局。如果父级元素没有设置宽度和高度，表格可能会根据其内容自适应宽度，但高度可能会出现问题，导致表格内容无法完全显示或者出现滚动条。

基本的 vxe-table 使用示例，

        2.1父级元素设置了宽度和高度：

<template>
  <div style="width: 100%; height: 400px;"> <!-- 设置父级元素的宽高 -->
    <vxe-table :data="tableData" :columns="tableColumns"></vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...], // 表格数据
      tableColumns: [...] // 表格列配置
    };
  }
};
</script>

        给包裹 vxe-table 的 <div> 元素设置了 width: 100%; 和 height: 400px;。这样做的目的是确保表格有一个固定的显示区域，从而能够正确地渲染和滚动（如果需要的话）。 

        2.2内容决定高度

        表格能够自动扩展以填充整个可用空间，你可以将父级元素的宽度设置为百分比（如 100%），并将高度设置为 auto 或者不设置高度（让内容决定高度）。

<template>
  <div style="width: 100%; height: auto;"> <!-- 父级元素宽度为100%，高度自适应 -->
    <vxe-table :data="tableData" :columns="tableColumns"></vxe-table>
  </div>
</template>

 在这种情况下，表格的高度将取决于其内容以及父级元素的高度。如果父级元素的高度是由其他内容决定的，那么表格的高度也会相应地调整。