Vue2とEL-Tableを組み合わせてテーブルグループ化、ドラッグアンドドロップソートを実裝する

この記事では、El-Tableコンポーネントを使用して、Vue2プロジェクトでテーブルグループ化、ドラッグアンドドロップのソート機能を実裝する方法を紹介します。テーブルデータが「トッピング」と「非トップ」の2つのグループに分割され、グループ內のデータをドラッグしてソートできると仮定しますが、グループ間でドラッグすることはできません。

シーンの説明

このプロジェクトでは、VUE2とElement UIのELテーブルコンポーネントを使用しています。テーブルデータは次のとおりです。

• 上部エリア：データ番號1、2、3
• 非トップエリア：データ番號4、5、6

ターゲット：

1. トップエリアデータ（1、2、3）は互いにソートできます。
2. 非トップの領域データ（4、5、6）は互いにソートできます。
3. 上部と非トーピング領域の間のデータ（たとえば、1と4）は、互いにドラッグして落とすことはできません。

実裝計畫

vuedraggableライブラリを使用して、ドラッグアンドドロップ機能を実裝します。

1. vuedraggableをインストールする：

    npmインストールvuedraggable

2. vuedraggable紹介：

   Vueコンポーネント：

    「vuedraggable」からドラッグ可能なインポート

3. データ構造の調整：

   テーブルデータを2つの配列に分割します。

   データ（） {
     戻る {
       TopData：[{id：1、content： 'top 1'}、{id：2、content： 'top 2'}、{id：3、content： 'top 3'}]、
       NormalData：[{id：4、content： 'normal 4'}、{id：5、content： 'normal 5'}、{id：6、content： 'normal 6'}]
     };
   }、
   コンポーネント：{
     ドラッグ可能
   }

4. vuedraggableを使用してドラッグアンドドロップを実裝します。

   テンプレートで：

   <template>
     <div>
       <h3>トップエリア</h3>
       <draggable group="top" v-model="topData">
         <el-table :data="topData" style="width: 100%">
           <el-table-column label="內容" prop="content"></el-table-column>
         </el-table>
       </draggable>
       <h3>トップではないエリア</h3>
       <draggable group="normal" v-model="normalData">
         <el-table :data="normalData" style="width: 100%">
           <el-table-column label="內容" prop="content"></el-table-column>
         </el-table>
       </draggable>
     </div>
   </template>

5. ドラッグアンドドロップエンドイベント処理：

   方法：

   方法：{
     onend（）{
       console.log（ 'Top Data：'、this.topdata）;
       console.log（ '非登録データ：'、this.normaldata）;
       //ここにデータの永続性またはその他の更新ロジックを追加}
   }

上記の手順を通じて、エルテーブルテーブルのグループのドラッグアンドドロップ順序を実現でき、グループ間のデータをドラッグしてドロップすることはできません。必要に応じて、実際のアプリケーションでデータの持続性やその他の操作を改善することを忘れないでください。

以上がEL-Tableを使用してテーブルグループ化を実裝する方法、VUE2にドラッグアンドドロップのソートをドラッグアンドドロップしますか？の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。