vue2 el-table? ???? ??? ???, ??? ? ?? ??

? ????? EL-TABLE ?? ??? ???? VUE2 ?????? ??? ???, ??? ? ?? ?? ??? ???? ??? ?????. ??? ???? "Topped"? "Non-Topped"? ? ???? ?????? ??? ???? ????? ?? ? ? ??? ???? ??? ? ?? ????.

?? ??

? ????? vue2 ? ?? UI? el-table ?? ??? ?????. ??? ???? ??? ????.

• ?? ?? : ??? ?? 1, 2, 3
• ? ? ?? : ??? ?? 4, 5, 6

??:

1. ??? ?? ??? (1, 2, 3)? ?? ?? ? ? ????.
2. ? ? ?? ??? (4, 5, 6)? ?? ?? ? ? ????.
3. ??? ? ?? ?? (? : 1 ? 4) ??? ???? ?? ????? ??? ? ????.

?? ??

vuedraggable ?????? ???? ??? ? ?? ??? ??????.

1. vuedraggable ?? :

    NPM veudRaggable? ??????

2. vuedraggable ?? :

   VUE ?? ?? :

    'veudRaggable'?? draggable ?? ??

3. ??? ?? ?? :

   ??? ???? ? ??? ????.

    ??? () {
     ?? {
       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="內(nèi)容" 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="內(nèi)容" prop="content"></el-table-column>
         </el-table>
       </draggable>
     </div>
   </template>

5. ??? ? ?? ?? ??? ?? :

   ?? :

    ?? : {
     onend () {
       Console.log ( '?? ??? :', this.topdata);
       Console.log ( '? ?? ??? :', this.normaldata);
       // ??? ?? ?? ?? ???? ?? ??}
   }

?? ??? ?? EL-TABLE ???? ?? ??? ? ?? ??? ??? ? ??? ?? ? ???? ????? ??? ? ????. ??? ?? ?? ???????? ??? ??? ? ?? ??? ???????.

? ??? el-table? ???? vue2?? ??? ???, ??? ? ?? ??? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!