vue+element 使用sortable實現表格拖拽


在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.進行表格拖拽,圖片展示


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM