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をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Nginx の break と last の違いの詳細な分析
1. 親divは疑似クラスafterとzoomを定義します <スタイル タイプ="...
目次Nginx は 2 つの socket.io サーバーをプロキシします。 socket.ioの動...
今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...
目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...
目次序文1. Vue2 のライフサイクルインスタンスのライフサイクルその他のライフサイクルフック2....
MySQL自体は再帰構文をサポートしていませんが、自己接続を通じていくつかの単純な再帰を実現できます...
HTML ファイルとは何ですか? HTML は Hyper Text Markup Language...
フレックスレイアウトFlex は Flexible Box の略で、「柔軟なレイアウト」を意味します...
<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...
目次概要1. 依存性注入2. Angularの依存性注入フレームワーク概要依存性注入: デザインパタ...
JBoss は Tomcat を Web コンテナとして使用するため、JBoss の Web コンテ...
目次1. vue-video-playerをインストールする2. vue-video-playerを...
<本文> <div id="ルート"> <h2&...
目次アレイ重複排除1. from() を新しい Set() メソッドに重ねる2. スプレッド演算子 ...
PHP で MySQL サーバーが消えた問題1. 背景以前、Codeigniter でコンソール コ...