シャトルボックス機能を実装するためのVueの詳細なコード

シャトルボックス機能を実装するためのVueの詳細なコード

Vue - シャトルボックス機能を実装します。効果図は次のようになります。

CS

。移行{
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
}
.transfer>.list {
    幅: 200ピクセル;
    高さ: 300px;
    境界線: 1px実線 #000;
    リストスタイル: なし;
}
。コンテンツ{
    フォントサイズ: 30px;
    マージン: 0 20px;
}
.list>li{
    パディング: 5px;
    ボックスのサイズ: 境界線ボックス;
}

html

<div class="転送">
    <!-- 左フレーム -->
    <ul class="リスト左">
        <template v-for="(item, index) in info">
            <li :key="インデックス">
                <input type="checkbox" :id=`checkbox${item.id}` name="checkbox" :checked="item.select" @click="item.select=!item.select" />
                <label :for=`checkbox${item.id}` >{{ item.name }} </label>
            </li>
        </テンプレート>
    </ul>

    <!-- 追加/削除 -->
    <div class="content">
        <p class="push" @click='push' >>>></p>
        <p class="del" @click='del'><<<</p>
    </div>

    <!-- 右フレーム -->
    <ul class="リスト右">
        <template v-for="(item, index) in new_info">
            <li :key="インデックス" >
                <input type="checkbox" :id=`newcheckbox${item.id}` name="newcheckbox" :checked="item.select" @click="item.select=!item.select" />
                <label :for=`newcheckbox${item.id}`>{{ item.name }} </label>
            </li>
        </テンプレート>
    </ul>
</div>

js

データ(){
    戻る {
        // 元のデータ、左フレームのデータ情報:[
            {id:'1',name:'シャオミン'},
            {id:'2',name:'シャオホン'},
            {id:'3',name:'チキン'},
            {id:'4',name:'ハハハハ'},
            {id:'5',name:'ああ'},
            {id:'6',名前:'dddd'},
            {id:'7',名前:'qwert'},
        ]、
        new_info: [], // 新しいデータ、右フレームデータ}
},
メソッド:{// データを追加する push(){
        that = this とする;
        let info = JSON.parse(JSON.stringify(that.info)); // 元のデータをコピーします。ディープコピー info.forEach((item, index)=>{
            // 選択が true の場合にデータを実行する if (item.select){
                that.new_info = that.new_info.concat(item).sort((a,b)=>{ return a.id - b.id }); // 新しいデータフレームに追加してソート delete info[index]; // データを削除 item.select = false; 
            }
        })
        info = info.filter(function (val) { return val }); // フィルターは未定義 
        that.info = info; // 元のデータを更新\
    },
    // データを削除 del(){
        that = this とする;
        let info = JSON.parse(JSON.stringify(that.new_info)); // 元のデータをコピーします。ディープコピー info.forEach((item, index)=>{
            // 選択が true の場合にデータを実行する if (item.select){
                that.info = that.info.concat(item).sort((a,b)=>{ return a.id - b.id }); // 新しいデータフレームに追加してソート delete info[index]; // データを削除 item.select = false;
            }
        })
        info = info.filter(function (val) { return val }); // フィルターは未定義 
        that.new_info = info; // 元のデータを更新する},
},

マウントされた(){
    that = this とする;
    // 選択されているかどうかを判断するために、元のデータに選択フィールドを追加します。that.info.map((val,key)=>{ that.$set(val,'select',false) });
}

************************************************************************************************************************************************************

ここで splice を使用してデータを削除すると問題が発生します。this.info.splice(index,1); 複数の要素を選択すると、一部の要素のみが削除され、選択した要素の一部がまだ存在していることがわかります。これは、要素が削除されると、配列のインデックスが変更され、プログラムが異常になるためです。したがって、削除を使用してデータをクリアし、未定義をフィルタリングします。一般的な考え方は、データに選択フィールドを追加し、それを複数選択ボックスのチェックされたフィールドにバインドし、クリックするとフィールドが反転されるというものです。データを転送するときは、選択が true のデータのみが実行され、新しいデータ フレームに追加され、元のデータは削除されます。

シャトルボックス機能を実装するためのVueの詳細なコードに関するこの記事はこれで終わりです。Vueシャトルボックスの関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueシャトルボックスは上下の動きを実現します
  • vue3+typeScriptシャトルボックスの実装例
  • VUE Element-uiのシャトルフレームの使い方を詳しく解説
  • Vueはシャトルボックス効果を実現します
  • Vue はオンデマンドでシャトルフレームを転送する要素を導入しました

<<:  CSSオーバーフローメカニズムについての簡単な説明

>>:  Nginx の break と last の違いの詳細な分析

推薦する

CSS スティッキーフッター実装コード

この記事では、CSS スティッキー フッターの実装コードを紹介し、共有します。詳細は次のとおりです。...

docker に nacos をインストールしてデータベースを構成する詳細なチュートリアル

環境の準備 Docker環境 MySQL 5.7 (公式イメージはmysql8をサポートしていません...

React Hooksコンポーネント間で値を渡す方法の詳細な説明(tsを使用)

目次父から息子へ息子から父へクロスレベルコンポーネント(親から子孫)父から息子へpropsを通じて値...

HTML コード例: ハイパーリンクの詳細な説明

ハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間を移動できるた...

MySQL コマンドラインモードアクセス操作 MySQL データベース操作

使用環境cmd モードで、mysql --version と入力します (インストールされている M...

CSS3 のフレックスレイアウト幅の無効性の解決策

2 列レイアウトはプロジェクトでよく使用されます。この効果を実現する方法はたくさんあります。 しかし...

EF (Entity Framework) の挿入または更新データ エラーの解決方法

エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...

CSS スタイルを HTML 外部スタイルシートにインポートする方法

リンクインスタイルとは、すべてのスタイルを 1 つ以上の外部スタイルシート ファイルに配置することで...

MySQL 全文あいまい検索 MATCH AGAINST メソッドの例

MySQL 4.x 以降では、全文検索 MATCH ... AGAINST モード (大文字と小文字...

ウェブページで Enter キーを押すと自動的にフォームを送信し、他のページにジャンプするソリューション

ウェブページでEnterキーを押すと、フォームは自動的に送信され、他のページに移動します。クエリフォ...

HTML シンプルな Web フォーム作成例の紹介

<input> はユーザー情報を収集するために使用され、終了ステートメントはありません。...

@media レスポンシブ CSS を使用してさまざまな画面に適応する例

定義と使用@media クエリを使用すると、さまざまなメディア タイプに異なるスタイルを定義できます...

入力ボックスのプレースホルダーテキストのデフォルトの色を変更する -webkit-input-placeholder メソッド

HTML5 では、入力用のネイティブ プレースホルダー属性が追加されており、これは高度なブラウザでサ...

vue cli3は環境ごとにパッケージ化の手順を実装します

cli3 でビルドされた vue プロジェクトは、ゼロ構成ファイルとして知られています。パッケージ化...

MySQL のバックアップとリカバリの設計アイデア

背景まず、背景を説明します。ある制約により、当社の現在のバックアップ戦略では、1 日おきにフル バッ...