シャトルボックス機能を実装するための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 でフロートをクリアするための完全ガイド (要約)

1. 親divは疑似クラスafterとzoomを定義します <スタイル タイプ="...

nginxプロキシsocket.ioサービスの落とし穴の詳細な説明

目次Nginx は 2 つの socket.io サーバーをプロキシします。 socket.ioの動...

MySQL で特定の日、月、または年のデータをクエリするためのコードの詳細な説明

今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...

TypeScript 2.0 マーク付き共用体型の詳細な説明

目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...

Vueのライフサイクルについて詳しく説明します

目次序文1. Vue2 のライフサイクルインスタンスのライフサイクルその他のライフサイクルフック2....

MySQLの再帰問題

MySQL自体は再帰構文をサポートしていませんが、自己接続を通じていくつかの単純な再帰を実現できます...

HTMLの基礎 HTMLの構造

HTML ファイルとは何ですか? HTML は Hyper Text Markup Language...

flexとは何か、flexレイアウト構文の詳細なチュートリアル

フレックスレイアウトFlex は Flexible Box の略で、「柔軟なレイアウト」を意味します...

ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...

Angular 依存性注入の説明

目次概要1. 依存性注入2. Angularの依存性注入フレームワーク概要依存性注入: デザインパタ...

Tomcat でのコネクタ構成

JBoss は Tomcat を Web コンテナとして使用するため、JBoss の Web コンテ...

vue-video-player を使用してライブ放送を実現する方法

目次1. vue-video-playerをインストールする2. vue-video-playerを...

Vueフィルターの詳細な説明

<本文> <div id="ルート"> <h2&...

JavaScript の便利な配列トリック 12 選

目次アレイ重複排除1. from() を新しい Set() メソッドに重ねる2. スプレッド演算子 ...

MySQLサーバーが消えたエラーの解決策

PHP で MySQL サーバーが消えた問題1. 背景以前、Codeigniter でコンソール コ...