成果を達成するコードクラウドアドレス 転がり荷重知識備蓄ant-design-vue のリストスクロール読み込みのアイデアを参考にして、解決策として vue-infinite-scroll と vue-virtual-scroller を使用します。 コンポーネントのパッケージシステム全体で使用されるフレームワークは ant-dsign-vue であるため、コンポーネントのカプセル化の変数命名スタイルは a-table と可能な限り一貫しています。 1. コンポーネントの命名XScrollTable.vue 2. 小道具は用意します必須フィールド: dataSource -- データ ソース 列 - テーブルに表示される列情報。スロットの使用法は、以下で説明する a-table とまったく同じではありません。 itemSize -- データの各行の高さ オプションフィールド: rowKey -- データの主キー識別子、デフォルトは「key」 高さ - テーブル表示領域の高さ。デフォルトは 500 です。 pageSize - テーブルをスクロールするたびに読み込まれるデータの量。デフォルトは30です。 infiniteScrollDistance -- テーブルの読み込みをトリガーするための距離条件。デフォルト値は 10 です。 rowSelection -- テーブルの複数選択構成。処理される属性は selectedRowKeys、onChange、width です。デフォルトは null であり、複数の選択は表示されません。 3. 使用例まず、10,000 個のデータを初期化し、テーブルに表示します。 データ = new Array(10000).fill(1); データ = data.map((item1, インデックス) => { 項目を {} とします。 アイテムID = インデックス; item.age = "名前"; item.address = "住所"; 返品商品; }); デフォルトデータをエクスポートします。 注: Array コンストラクターによって生成されたデータがすべて空であり、配列インデックスがなく、マップ ループを実行できないため、ここで fill(1) が追加されます。 テーブルをロードしています <xスクロールテーブル スタイル="マージントップ: 10px" 行キー="id" :itemSize="22" :rowSelection="{selectedRowKeys: selectedRowKeys、onChange: onSelectChange、幅:50}" :columns="列" :dataSource="データ"> <テンプレート スロット="アクション" スロット スコープ="{レコード、テキスト}"> <a @click="handleDetail(record)">詳細</a> </テンプレート> </x-スクロールテーブル> コンポーネントパッケージの概要1. 可能な限り計算プロパティを使用するテーブルは単純にカプセル化されていますが、多くの属性を定義する必要があります。データに変数を定義する代わりに計算属性を使用すると、変数のメンテナンスの作業負荷を軽減できます。 コンポーネント全体では 1 つのページ変数のみが定義され、他の変数は計算プロパティを使用します。 データ() { 戻る { // 現在表示されているページ番号 page: 1, }; }, 例えば: ページ属性を通じて計算プロパティを定義し、現在読み込まれているデータの量を示します。 // 表示される添え字の最大数は、データ項目の合計数よりも大きくなる可能性があります。この問題を解決するにはスライスを使用します。lastIndex() { this.pageSize * this.page を返します。 }, この計算されたプロパティを通じて、他の計算されたプロパティも同時に導出される。 // テーブルデータがロードされたかどうかを示します busy() { this.lastIndex >= this.dataSource.length を返します。 }, // 現在RecycleScrollerスクロールコンポーネントにロードされているデータtableData() { this.dataSource.slice(0, this.lastIndex) を返します。 }, 一連の計算プロパティはページ プロパティから派生します。ページ プロパティのみを維持する必要があり、その他は自動的に計算されます。 2. テーブル用のスロットを用意するまず、レンダリングする必要がある列は、テーブルから渡される列パラメータを通じて計算されます。計算されたプロパティもここで使用されます。 // columnFieldKey 値をキーとして、配列項目を値として使用して、列配列を列オブジェクトに変換します。columnMap() { this.columns.reduce((returnValue, cur) => { を返します。 returnValue[cur[列フィールドキー]] = cur; 戻り値を返します。 }, {}); }, // 配列内の列キー値を取得します --columnFieldKey 列キー() { this.columns を返す .map(item => item[列フィールドキー]); }, テンプレートのトラバース <div v-for="(キー) of columnKeys" クラス="ellipsis-cell" :key="キー" :style="itemStyle(列マップ[キー])" > <slot v-if="izSlotRender(columnMap[キー])" :name="columnMap[キー].scopedSlots.customRender" :record="行" :text="行[キー]"> </スロット> <span v-else :title="行[キー]">{{ renderItem(行、インデックス、キー) }}</span> </div> // スロットレンダリングを使用するかどうか izSlotRender(item) { item.scopedSlots と item.scopedSlots.customRender を返します。 }, 列を定義するときに scopedSlots と customRender が渡されると、スロット レンダリングが使用されます。 しかし、ここでは ant-design-vue のテーブル スロットのレンダリングとは違いがあります。 スロットは slot タグで定義しました。親コンポーネントがスロットパラメータを取得するときは、 slot-scope="{record,text}" オブジェクト分解メソッドのみを使用できます。 ant-design-vue テーブルでは、 slot-scope="record,text" を直接使用してパラメータを取得できます。 スクロール読み込みデータの別の実装テーブルデータが多い場合、データが表示される前にページを読み込むのに時間がかかります。これは良いエクスペリエンスではないので、データを読み込むにはスクロールする必要があります。 <el-table :data="materielList" style="width: 100%" class="familyDataDetail" height="250"> <el-table-column prop="eventId" label="イベントID"> <テンプレートスコープ="スコープ"> <label>{{eventMap[scope.row.eventId] == null ? '--': eventMap[scope.row.eventId].sn}}</label> </テンプレート> </el-table-column> <el-table-column prop="title" label="対応するイベント"> <テンプレートスコープ="スコープ"> <label>{{eventMap[scope.row.eventId] == null ? '--': eventMap[scope.row.eventId].title}}</label> </テンプレート> </el-table-column> <el-table-column prop="年齢" label="担当者"> <テンプレートスコープ="スコープ"> <ラベル>{{eventMap == null || eventMap[scope.row.eventId] == null || eventMap[scope.row.eventId].personalInformation == null ? '--': イベントマップ[scope.row.eventId].personalInformation.name}}</label> </テンプレート> </el-table-column> <el-table-column prop="誕生日" label="素材名"> <テンプレートスコープ="スコープ"> <label>{{materirlName}}</label> </テンプレート> </el-table-column> <el-table-column prop="idcardNo" label="ステータス"> <テンプレートスコープ="スコープ"> <label>{{formatType(scope.row.type)}}</label> </テンプレート> </el-table-column> <el-table-column prop="関係" label="数量"> <テンプレートスコープ="スコープ"> <label>{{formatUseNum(scope.row.useNum)}}</label> </テンプレート> </el-table-column> <el-table-column prop="ethtic" label="使用時間"> <テンプレートスコープ="スコープ"> <label>{{changeTime(scope.row.createOn)}}</label> </テンプレート> </el-table-column> </el-table> 以下はjs部分です メソッド: { 初期化(パラメータ){ id = param.param && param.param.id とします。 if(id){ this.start = 0 MaterialRecordService.query({param: {baseId: this.baseId, materialId: id},start: this.start,limit: 30}).then(rsp =>{//最初のリクエストデータ、30レコード this.start += 30 this.materielList = rsp.data MissionEventService.microList({ids: rsp.data.map(n => n.eventId)}).then(rsp3 => { this.eventMap = {} rsp3.data.forEach(n => (this.eventMap[n.id] = n)) }) }) } }, スクロール() { 内部に document.querySelector('.el-table__body-wrapper') を追加します。 if(inner.scrollHeight - inner.scrollTop <= inner.clientHeight){//true の場合、一番下に到達したことが証明され、インターフェースを要求できます。if(this.flag){//スクロールイベントのスイッチを設定します (データで flag: true を宣言します) デフォルトは true です。 this.flag = false MaterialRecordService.query({param: {baseId: this.baseId, materialId: this.entity.id},start: this.start,limit:30}).then(rsp =>{//一度に30個のアイテムをロードします this.materielList = this.materielList.concat(rsp.data) this.start += 30 this.flag = true MissionEventService.microList({ids: rsp.data.map(n => n.eventId)}).then(rsp3 => { rsp3.data.forEach(n => (this.eventMap[n.id] = n)) }) }) } } } }, マウントされた(){ this.init({...this.param})<br> //テーブル dom オブジェクトのスクロール イベントをリッスンします。 document.querySelector('.el-table__body-wrapper').addEventListener('scroll', this.onScroll); } ここではどのDOMオブジェクトが監視されているかを説明します また、scrollHeight、scrollTop、clientHeightの3つのプロパティについても説明する必要があります。 これは他の人の写真のスクリーンショットで、いくつか追加されています scrollHeight: Web ページの全テキストの高さ。 scrollTop: ウェブページのスクロールの高さ、 clientHeight: ウェブページの表示領域の高さ 以上がVueのスクロールロードテーブルの実装の詳細内容です。Vueのスクロールロードテーブルの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL 5.6 zipパッケージのインストールチュートリアルの詳細
目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...
最新の Ubuntu Server バージョンを使用している場合、ようこそメッセージに、Ubuntu...
「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...
さて、質問させてください。MySQL で列を int(0) に設定すると何が起こりますか?この問題を...
CSS3 を学習する過程で、CSS3 属性を使用すると多くのクールな効果を簡単に実現できることが分か...
Text の height 属性が定義されている場合、Text に入力されたテキストは垂直方向に中央...
データの昇順、降順ソート1. フィールド名による単一フィールドのソート順機能:どのフィールドを基準に...
1. 環境整備1.MySQLインストールパス: /usr/local 2. CentOS 6.2 ...
今日のキャンパス採用筆記試験では、固定された最初の行と最初の列を実装し、幅をウィンドウの変更に適応さ...
1. 問題Linux 上の mysql5.7 のパスワードを忘れました2. 解決策• ステップ 1:...
UI デザインにおける多くの概念は言葉で言えば似ているように見えるかもしれませんが、実際には大きく異...
.net 開発に関しては、Microsoft の SQL Server データベースに精通しており、...
float の使用例左サスペンション: float:left;右サスペンション: float:rig...
序文:ストレージ エンジンはデータベースの中核です。MySQL の場合、ストレージ エンジンはプラグ...
1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...