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 の違いの詳細な分析
この記事では、CSS スティッキー フッターの実装コードを紹介し、共有します。詳細は次のとおりです。...
環境の準備 Docker環境 MySQL 5.7 (公式イメージはmysql8をサポートしていません...
目次父から息子へ息子から父へクロスレベルコンポーネント(親から子孫)父から息子へpropsを通じて値...
ハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間を移動できるた...
使用環境cmd モードで、mysql --version と入力します (インストールされている M...
2 列レイアウトはプロジェクトでよく使用されます。この効果を実現する方法はたくさんあります。 しかし...
エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...
リンクインスタイルとは、すべてのスタイルを 1 つ以上の外部スタイルシート ファイルに配置することで...
MySQL 4.x 以降では、全文検索 MATCH ... AGAINST モード (大文字と小文字...
ウェブページでEnterキーを押すと、フォームは自動的に送信され、他のページに移動します。クエリフォ...
<input> はユーザー情報を収集するために使用され、終了ステートメントはありません。...
定義と使用@media クエリを使用すると、さまざまなメディア タイプに異なるスタイルを定義できます...
HTML5 では、入力用のネイティブ プレースホルダー属性が追加されており、これは高度なブラウザでサ...
cli3 でビルドされた vue プロジェクトは、ゼロ構成ファイルとして知られています。パッケージ化...
背景まず、背景を説明します。ある制約により、当社の現在のバックアップ戦略では、1 日おきにフル バッ...