Vue - テーブルの仮想スクロール

Vueでテーブルの仮想スクロール/リサイクルラースクロールを活用できるパッケージをおすすめしていただきたいです。これらの 2 つのライブラリを試しました: https://github.com/tangbc/vue-virtual-scroll-list https://github.com/Akryom/vue-virtual-scroller 項目の仮想スクロール リストを生成できます。しかし、この動作をテーブルに実装したいと考えています。私のテーブルは VuetifySimpletable であり、< があります

P粉401901266 2023-12-10 15:53:07 0  1  641

オーバーフロー: スクロールすると、テーブルの非表示の列が表示されなくなります。何が悪かったのか？

私は、react-grid を既存の flask アプリケーションに統合しています。これを行うには、カスタム Webpack 構成を使用してアプリケーションをコンパイルする必要があります。反応コンポーネントを正常にレンダリングできますが、react-grid を使用して overflow:scroll を適用すると、テーブルの表示部分のみがレンダリングされ、残りのスクロール領域は空白のままになります。ここをクリックすると、オーバーフロー スクロールが有効になっている ReactGrid の GIF が表示されます。ここをクリックすると、オーバーフロー スクロールが有効になっていない React...

P粉345302753 2023-08-17 13:55:29 0  1  447

rowspan 属性を持つスティッキー TD がスクロール時にテーブルの境界を超える

スティッキーヘッダーと行スパンを持つスティッキー TDS を持つテーブルがあります。スクロールすると、ヘッダーの上部に td と rowspan が表示されます (この例では最初の列です)。 z-index を指定すると、ヘッダーは td の上に配置されますが、そのテキストは重なり合います。これを防ぐにはどうすればよいでしょうか?私の最初のバージョンには行スパンがなく、空のセルが含まれており、正しく動作しました。 *{パディング:0;マージン:0;ボックスサイズ:ボーダーボックス;}/*.wrapper{オーバーフロー:a

P粉210405394 2024-03-21 20:28:02 0  1  450

スクロールバーが表示されていない場合の tbody の幅を変更する

スクロールバーのあるテーブルがあり、テーブルをフィルターするとスクロールバーが表示されませんが、これは私にとっては良いことですが、問題は幅が変化し、テーブルの幅が大きくなることです。次のようになります: スクロールバーあり: スクロールバーなし、フィルタリング後: これは私の CSS コードです: .table{table-layout:fixed;width:100%! important;}tbody{display:block;height:326px ;overflow:auto ;width:1205px;}頭

P粉211273535 2024-04-02 11:15:58 0  1  378

マウス ホイールを使用してページをズームし、クリックしてドラッグしてページをパンします

マウス ホイールを使用してページ全体にスクロールとパンの効果を作成するにはどうすればよいですか?基本的には他の 2D エディターと同じように、スクロールしてズームし、クリックしてドラッグしてパンしますが、対象となるのはボディ全体です。それに関する情報はオンラインで見つかりません。

P粉308783585 2024-03-26 14:11:27 0  1  323

スクロール イベント リスナーが要素に追加されましたが、scrollTop が 0 に等しくない場合にのみ正しく移動します

そこで、完了済みタスクとアクティブなタスクという 2 つのリストがあるこの小さなスクリプトを作成しました。ボタンをクリックするとタスク リストを切り替えることができ、[詳細情報] をクリックするとタスクの詳細を読むことができます。 「詳細情報」をクリックすると、新しい div 要素が作成され、そのホスト要素の Y 位置を追跡したいのですが、途中まで機能します。これは次のようになります: ここに画像の説明を入力してください これはバグです。スクロール可能な要素のscrollTopが0でない場合にこのエラーが発生すると確信しています(これは正しい方法で作成されており、スクロールを開始するとすべて上...

P粉427877676 2024-04-01 11:03:26 0  1  568

スクロール状態をいじらずに React の div の先頭に追加します

リアクションに困っています。水平スクロールで表示できる多くの子 div を含む、単純なスクロール可能な div を実装しようとしています。基本的に、各子 div は 1 日に対応します。このコンポーネントは、ユーザーが当日と翌日に関する情報を初めて表示するときにロードされます。ただし、ユーザーが（左または右に）スクロールした場合、ある種の「無限スクロール機能」を実装して、より多くの情報を追加できるようにしたいと考えています。新しい子 div を親 div の最後に追加しようとしても、問題はありません。ただし、親 div の先頭に新しい子要素を追加しようとすると (たとえば、ユーザーは最初のいく...

P粉217629009 2024-03-19 19:13:46 0  1  438

mjml テーブルを水平スクロールで強化し、オーバーフローを追加する

mjml を使用して、テーブルを含む電子メール テンプレートを作成しています。また、ヘッダー名が非常に長いため、テーブルが横方向に大きくなりすぎます。青いコンテナ内を水平にスクロールさせたいのですが、実現できません。スクロール可能にするにはどうすればよいですか?これはmjmlのライブコードです

P粉464088437 2024-03-27 22:43:41 0  1  424

データ更新表示 - フライト情報などのデータベース内のデータを空港の大型スクリーンに表示する方法

データベース内にn個のデータがあります（リアルタイムで変化する可能性があります）ので、大きな画面に一度に8個のデータを表示したいのですが、Pを自動的にスクロールさせてリアルタイムに表示するにはどうすればよいでしょうか？空港の大型スクリーンにフライト情報のように表示

王 2018-06-14 10:07:14 0  6  2061

HTML テーブルで現在表示されている上部行と下部行を決定する JS/VueJS 実装

thead と tbody を備えた標準の HTML テーブルがあります。tbody の行数は配列のサイズに依存するため、任意の数にすることができます。テーブルにはスクロールできる最大の高さがあります。テーブルがスクロールするときに、新しく表示された上部と下部の行を計算できるようにしたいと考えています。また、これを実現するために jquery を使用することはできません。javascript を使用したいだけです。この質問に対する受け入れられた回答を試してみましたが、不正確のようで、2〜7行の数を誤ってカウントすることがあります...HTMLテーブルの最上位行の決定

P粉103739566 2023-09-10 19:23:08 0  1  522

React ページの前の位置に戻ります

ページ A という非常に長いリストがあると想像してください。 500行目まで下にスクロールします。この行はページ B へのリンクでもあり、行の詳細が表示されます。 Bページで内容を確認した後、Aページに戻りたいのですが、Bページに行った時点の500行目に戻りたいのです。 ReactJS アプリケーションでこの動作を実現するにはどうすればよいですか?

P粉883278265 2023-08-29 23:54:13 0  1  616

ボリストは情報を取得できませんでした

volist タグを使用したテーブル情報の取得に失敗しました

凛Archer 2018-04-27 18:42:34 0  2  1215

javascript - Chrome ブラウザのコンソールがオブジェクトを展開したときに自動的に最下部に戻らないようにする方法。

Google Chromeコンソールはオブジェクトのプロパティを展開するとコンソールのスクロールバーが常に自動的に下に戻ってしまうため、情報が多い場合には必ず一度展開して引き上げる必要があります。とても面倒です。誰か助けてくれませんか?それを解決する良い方法があります。

我想大声告诉你 2017-05-19 10:42:50 0  1  627

地図上で家を見つける機能を実現したいですか?そのようなチュートリアルはありますか？

AJAX+PHPを実現します。データベース内の情報形式: 地図座標 (X 値、Y 値); 住所情報 (座標に基づいて自動的に取得); アイデア、各プロパティの情報に基づいて住所を特定し、モバイル インターフェイスに地図をロードし、マークします。この画面領域には以下のすべてのプロパティ情報が表示されます。訪問者が携帯電話で地図エリアをドラッグすると、その画面上のすべての物件情報が自動的に読み込まれますが、そのような事例やビデオチュートリアルはありますか?

唯蓝 2019-03-17 23:55:56 0  2  1366

インターフェースから取得したテーブル情報の部分自動リフレッシュの実装方法

html如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>title</title><!-- <meta http-equiv="refresh" content="2" > --&g

胡行东 2019-03-29 11:02:54 0  2  1119

php - Laravelでマルチテーブルクエリを実装する方法

ショッピング カートを表形式で表示するビューがあります。各ショッピング カート エントリは、現在購入されている花の詳細と購入数量を表示する必要があります。データベースには、花とカートの 2 つのテーブルがあります。前者には基本的なテーブルが含まれています花の情報。花の名前などの情報。後者には、ショッピング カートのエントリ情報が含まれます。

大家讲道理 2017-05-18 10:47:22 0  1  1007

React アプリケーションのパフォーマンスの最適化: 多数のプロジェクトをレンダリングする効率的な方法

React アプリケーションを開発していて、項目の大きなリスト (数千行) を表示する必要があります。現在、ユーザーがリストをスクロールしたり項目をフィルターしたりすると、パフォーマンスが非常に遅くなります。 React アプリケーションのパフォーマンスを最適化してユーザー エクスペリエンスを向上させる方法はありますか?いくつかの追加情報: - 項目のリストをレンダリングするために React 関数コンポーネントとフックを使用しています。 - リスト内の各項目には、テキストや画像などの複数のデータ フィールドが含まれます。 -現在、組み込みのマップ関数を使用してアイテムのリストを表示しています...

P粉733166744 2024-01-16 20:43:20 0  1  415

ユーザーをクリックしてユーザーデータを表示するにはどうすればよいですか?

VueJS を使用してプロジェクトに取り組んでおり、次のことが必要です: API を使用して、ホームページ内のユーザーのリストを取得します。ユーザーのボタンがクリックされると、別のコンポーネントにリダイレクトし、そのユーザーの詳細 (クリックしたユーザーの詳細のみ) をそのコンポーネントに出力する必要があります。これはユーザー情報を示すテーブルです<v-data-tablehide-actions flat:headers="headers":items="doctors"><t

P粉448346289 2024-03-28 19:01:02 0  1  451

Google スプレッドシートのコード: 権限の問題とデータ配置エラーの解決

Google Script を使用して初めてのコードを作成しています。コードに問題があり、Google スプレッドシートにアクセスするために必要な権限がありません。コードを実行しようとすると、「例外: SpreadsheetApp.openById を呼び出す権限がありません」というエラーが発生します。このコードは、Google スプレッドシートのデータを変更および取得するように設計されています。アクセス許可の問題に加えて、コードには対処する必要がある特定の動作があります。このコードは、GoogleSheets スプレッドシートの特定の行に情報を転送することを目的としていますが、現在データをス...

P粉896751037 2024-04-03 09:26:47 0  1  416