vue+element 使用sortable实现表格拖拽

落花浮王杯 提交于 2020-04-09 01:03:45

在vue项目中使用sortable.js实现拖拽功能。官网地址:http://www.sortablejs.com/index.html

1.下载sortable.js:
npm install sortablejs --save

2.在当前页引入:
import Sortable from ‘sortablejs’

3.使用方法:

 1  mounted() {
 2     //使每次都可以拖拽
 3     this.$nextTick(()=>{
 4       setTimeout(()=>{
 5         this.rowDrop();
 6       },100)
 7     })
 8   },
 9  methods: {
10     clickitem (index) {
11       index=== this.labelIsexecuteTime ? this.labelIsexecuteTime = '' : this.labelIsexecuteTime = index
12     },
13     //行拖拽
14     rowDrop() {
15       const tbody = document.querySelector('.el-table__body-wrapper tbody')
16       Sortable.create(tbody, {
17         onEnd:({ newIndex, oldIndex })=> {
18           const currRow = this.tableData.splice(oldIndex, 1)[0];
19           this.tableData.splice(newIndex, 0, currRow);
20         }
21       })
22     },
23 }

4.进行表格拖拽,图片展示

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!