sortable+element 實現表格行拖拽的方法示例

npm install vuedraggable

import Sortable from 'sortablejs';

@Component({
 components: {
 Sortable
 }
})

<el-table
 ref="filterTable"
 row-key="ip" 
 @filter-change="handlerFilterChange" 
 class="cl-table" 
 :data="resourceList" 
 v-loading="resourceListLoading" 
 stripe style="width:100%;">
 <el-table-column
 prop="name"
 label="主機名" 
 :min-width="150" 
 show-overflow-tooltip>
 </el-table-column>
 </el-table>

mounted() {
 // 表格中需要實現行拖動，所以選中tr的父級元素
 const table = document.querySelector('.el-table__body-wrapper tbody')
 const self = this
 Sortable.create(table, {
 onEnd({ newIndex, oldIndex }) {
 console.log(newIndex, oldIndex)
 const targetRow = self.resourceList.splice(oldIndex, 1)[0]
 self.resourceList.splice(newIndex, 0, targetRow)
 }
 })
 }