vue+element拖動排序功能

項目中老大心血來潮設計了一能夠拖動達到排序的功能,感受沒什麼用,可是沒辦法,實現吧!

這功能確定不會手擼了,直接上插件

使用Sortable.js,對vue不友好,拖拽有時候亂跳;改用vuedraggable插件,此插件依賴Sortable.js.

　　教程地址:https://blog.csdn.net/IT_HLM/article/details/79541741

　　教程地址:https://blog.csdn.net/zhaoxiang66/article/details/81003094

1. 安裝npm install vuedraggable -S(可能須要安裝Sortable)
2. 引用import draggable from 'vuedraggable'
3. 註冊組件components: { draggable },
4. 經過draggable標籤來使用
5. 調用update方法,此方法事件對象返回新索引和舊索引,一樣數據是響應式的.

template代碼:

 1 <draggable v-model="codeList" @update="datadragEnd" :options="{animation:200}">
 2           <div class="drag-item" v-for="(item,i) in codeList" :key="i">
 3             <el-row>
 4               <el-col class="line" :span="6">&nbsp;{{item.field_title}}</el-col>
 5               <el-col class="line" :span="8">
 6                 <el-switch
 7                   v-model="item.is_show"
 8                   active-color="#13ce66"
 9                   @change="lockChange(item)"
10                   :active-value="1"
11                   :inactive-value="0"
12                 ></el-switch>
13               </el-col>
14               <el-col :span="8">
15                 <el-button type="text" size="mini" @click="showEditCode(item)">編輯</el-button>
16                 <el-button
17                   v-if="item.is_system != 1"
18                   type="text"
19                   size="mini"
20                   @click="deleCode(item)"
21                 >刪除</el-button>
22               </el-col>
23             </el-row>
24           </div>
25         </draggable>

 

methods代碼:

 1 async datadragEnd(evt) {
 2       evt.preventDefault();
 3       // console.log('拖動前的索引 :' + evt.oldIndex)
 4       // console.log('拖動後的索引 :' + evt.newIndex)
 5       // 遍歷數組,將索引值賦值到對應的sort_order上面,完成排序
 6       let arr = this.codeList;
 7       let newArr = await arr.map((item, i) => {
 8         return {
 9           sort_order: i,
10           field_code: item.field_code
11         };
12       });
13       const res = await this.$axios.post(`customer/save_order`, {
14         list: newArr
15       });
16       // console.log(res)
17       const { error, message } = res.data;
18       if (error == 0) {
19         this.$message.success(message);
20       }
21     },