vue+element拖动排序功能

Posted 2021-12-01 jun-qi

项目中老大心血来潮设计了一可以拖动达到排序的功能,感觉没什么用,但是没办法,实现吧!

这功能肯定不会手撸了,直接上插件

使用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     },