[vue+el-table+el-backtop] テーブルは先頭へ戻る、部分ロードと併用します。

レンダリング:

1. テーブルの組み合わせ トップに戻る

2. 部分ロード

解決：

1 つ上に戻る

target は、スクロールする dom の親要素のクラス名をバインドします。

1. テーブルに固定ヘッダーがある場合、スクロール dom の親要素のクラス名はel-table__body-wrapperです。

  <el-backtop target=".el-table__body-wrapper" :visibility-height="100" :bottom="75">
    <div
      style="
         {
    
    
          height: 100%;
          background-color: #1989fa;
          border-radius: 50%;
          box-shadow: rgb(16 0 0 / 41%) 0px 12px 6px 0px;
          text-align: center;
          line-height: 40px;
          color: #fff;
          width: 100%;
        }
      "
    >
      <i class="el-icon-top"></i>
    </div>
  </el-backtop>

図に示すように:

2. テーブルが固定ヘッダーではなく、ヘッダーがコンテンツとともにスクロールする場合、スクロールする dom の親要素のクラス名は el-table になります。

図に示すように、

スクロール ダムの親要素である限り、親要素のクラス名は異なっていてもかまいません。

2 つの部分荷重

部分ロードでは位置が不正確になる場合があり、図に示すように全画面ロードに配置されます。

最初は部分ロードであり、ロード後に全画面ロードになることがわかります。

解決策は、報告された読み込み要素に相対位置を追加することです。

// js
const loading = this.$loading({
    
    
  lock: true,
  text: '拼命加载中......',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.5)',
  target: document.querySelector('.about'),
})

// css
.about {
    
    
  position: relative;
}

ターゲット バインディングは部分ロードの dom をロードする必要があります

以上! 普段遭遇する小さなバグを記録します。