Vue2結(jié)合el-table實(shí)現(xiàn)表格分組拖拽排序

本文介紹如何在Vue2項(xiàng)目中，利用el-table組件實(shí)現(xiàn)表格分組拖拽排序功能。 假設(shè)表格數(shù)據(jù)分為“置頂”和“非置頂”兩組，要求組內(nèi)數(shù)據(jù)可拖拽排序，但組間不可拖拽。

場(chǎng)景描述

項(xiàng)目使用Vue2和Element UI的el-table組件。表格數(shù)據(jù)如下：

• 置頂區(qū)域：1、2、3號(hào)數(shù)據(jù)
• 非置頂區(qū)域：4、5、6號(hào)數(shù)據(jù)

目標(biāo)：

1. 置頂區(qū)域數(shù)據(jù)（1、2、3）可互相拖拽排序。
2. 非置頂區(qū)域數(shù)據(jù)（4、5、6）可互相拖拽排序。
3. 置頂和非置頂區(qū)域數(shù)據(jù)之間（例如1和4）不可互相拖拽。

實(shí)現(xiàn)方案

借助vuedraggable庫(kù)實(shí)現(xiàn)拖拽功能。

1. 安裝vuedraggable:

   npm install vuedraggable

2. 引入vuedraggable:

   在Vue組件中：

   import draggable from 'vuedraggable'

3. 數(shù)據(jù)結(jié)構(gòu)調(diào)整:

   將表格數(shù)據(jù)分為兩個(gè)數(shù)組：

   data() {
     return {
       topData: [{ id: 1, content: '置頂1' }, { id: 2, content: '置頂2' }, { id: 3, content: '置頂3' }],
       normalData: [{ id: 4, content: '普通4' }, { id: 5, content: '普通5' }, { id: 6, content: '普通6' }]
     };
   },
   components: {
     draggable
   }

4. 使用vuedraggable實(shí)現(xiàn)拖拽:

   在模板中：

   <template>
     <div>
       <h3>置頂區(qū)域</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>非置頂區(qū)域</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. 拖拽結(jié)束事件處理:

   在methods中：

   methods: {
     onEnd() {
       console.log('置頂數(shù)據(jù):', this.topData);
       console.log('非置頂數(shù)據(jù):', this.normalData);
       //  在此處添加數(shù)據(jù)持久化或其他更新邏輯
     }
   }

通過(guò)以上步驟，即可實(shí)現(xiàn)el-table表格的分組拖拽排序，且組間數(shù)據(jù)無(wú)法互相拖拽。 記得在實(shí)際應(yīng)用中根據(jù)需要完善數(shù)據(jù)持久化等操作。

以上是在Vue2中如何使用el-table實(shí)現(xiàn)表格分組拖拽排序？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！