移动端BootstrapVue表格横向滚动显示空白内容问题求助

问题现象 #

• 首次加载页面时，表格仅显示部分内容，剩余宽度区域为空白
• 切换到第2页再返回第1页，表格显示正常，但左右滚动后又变回空白
• Chrome DevTools的移动端模拟视图无法复现该问题

核心代码 #

<b-table :items="paginatedData" :fields="fields">
  <template #cell()="data" v-if="invoice.details.status.key == 2">
    <div
      class="edit-cell cursor-pointer"
      v-if="data.field.editable"
      @click="
        data.item.startEdit = true;
        inEditField = data.field.key;
      "
    >
      <input
        class="form-control"
        type="number"
        min="0"
        required
        v-model="tableData[data.index][data.field.key]"
        v-validate="'required|decimal|min:0'"
        v-show="data.item.startEdit && inEditField == data.field.key"
        :name="`${data.field.key}__${data.index}`"
        :data-vv-as="data.field.label"
        @blur="
          setEditedValue(
            data.item,
            data.index,
            data.field.key,
            $event,
            data.item.InvoiceDetailsId
          )
        "
        @keydown.enter.prevent="
          setEditedValue(
            data.item,
            data.index,
            data.field.key,
            $event,
            data.item.InvoiceDetailsId,
            data.field.equation
          )
        "
      />

      <span v-show="!data.item.startEdit || inEditField !== data.field.key">
        {{ data.value }}
      </span>
      <template v-if="data.field.validate.length">
        <div v-for="(rule, i) in data.field.validate" :key="i">
          <span
            v-if="
              equationValues(data.item, rule.criteria, data.index)
            "
            class="text-danger font-12 bold"
          >
            {{ rule.errorMessage }}
            {{ 
              SetValidate(
                data.index,
                data.field.key,
                equationValues(data.item, rule.criteria, data.index)
              )
            }}
          </span>
          <span v-else>
            {{ 
              SetValidate(
                data.index,
                data.field.key,
                equationValues(data.item, rule.criteria, data.index)
              )
            }}
          </span>
        </div>
      </template>
      <span
        v-if="errors.first(`${data.field.key}__${data.index}`)"
        class="d-block text-danger font-12"
      >
        {{ errors.first(`${data.field.key}__${data.index}`) }}
      </span>
    </div>
    <div class="has-equation" v-else-if="data.field.equation">
      {{ 
        (tableData[data.index][data.field.key] = equationValues(
          data.item,
          data.field.equation,
          data.index
        ))
      }}
      <div></div>
    </div>

    <div class="default-value" v-else>{{ data.value }}</div>
  </template>
</b-table>

解决方案 #

1. 强制表格重新渲染 #

给b-table绑定key属性，用当前分页页码作为key，每次分页切换时触发组件重新渲染，解决首次渲染的宽度计算错误：

<b-table 
  :items="paginatedData" 
  :fields="fields"
  :key="currentPage"
>
  <!-- 原有模板内容 -->
</b-table>

2. 手动触发窗口 resize 事件 #

在分页切换完成后或组件挂载完成时，触发浏览器的resize事件，强制重新计算布局：

// 分页切换方法中添加
changePage(page) {
  this.currentPage = page;
  this.$nextTick(() => {
    window.dispatchEvent(new Event('resize'));
  });
}

// 组件挂载时处理首次渲染
mounted() {
  this.$nextTick(() => {
    setTimeout(() => {
      window.dispatchEvent(new Event('resize'));
    }, 100);
  });
}

3. 分离数据计算与模板渲染 #

模板中直接赋值tableData会导致渲染异常，把计算逻辑移到JS中：

// 监听tableData变化，更新计算字段
watch: {
  tableData: {
    deep: true,
    handler(newData) {
      newData.forEach((item, index) => {
        const calcField = this.fields.find(f => f.equation);
        if (calcField) {
          item[calcField.key] = this.equationValues(item, calcField.equation, index);
        }
      });
    }
  }
}

模板中仅展示数据：

<div class="has-equation" v-else-if="data.field.equation">
  {{ data.value }}
</div>

4. 强制设置表格最小宽度 #

添加自定义CSS，确保表格在移动端不会收缩：

@media (max-width: 768px) {
  .b-table {
    min-width: fit-content;
    overflow-x: auto;
    table-layout: auto !important;
  }
}

5. 禁用响应式折叠（临时方案） #

如果上述方法无效，尝试关闭表格的响应式特性：

<b-table 
  :items="paginatedData" 
  :fields="fields"
  responsive="false"
>
  <!-- 原有模板内容 -->
</b-table>

内容的提问来源于stack exchange，提问作者Mohamed Tarek