实现element表格拖拽排序
一.
//添加拖拽列和样式
<el-table-column align="center" label="Drag" width="80">
<template slot-scope="{}">
<!-- <svg-icon class="drag-handler" icon-class="drag" /> -->
<i class="el-icon-time" />
</template>
</el-table-column>
二.
import Sortable from 'sortablejs'在需要拖拽的组件中引入和下包
三.
在return中定义
sortable: null
四.
在表格的请求中添加
this.$nextTick(() => {
this.setSort()
})
五.
添加ref
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="Loading"
border
fit
highlight-current-row
ref="dragTable"
>
六.在methods中添加方法
setSort() {
const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
setData: function(dataTransfer) {
// to avoid Firefox bug
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
dataTransfer.setData('Text', '')
},
})
}
