element拖拽表格

1.引入利用require或直接引入Sortable

require(["${base}/plugins/qs/qs.js","${base}/plugins/sortable/Sortable.min.js"], function (qs, Sortable) {
    
    

})

2.表格(注意key值不能重复)

<el-table ref="fileTable" :data="fileTable" class="fileTable" row-key="key">
</el-table>

3.拖拽方法(在表格展示后调用,如果表格初始不出现,用nextTIck)

//行拖拽
rowDrop() {
    
    
    const tbody = document.querySelector('.fileTable .el-table__body-wrapper tbody')
    const _this = this
    this.Sortable.create(tbody,{
    
    handle: '.el-icon-rank', animation: 150,
        onEnd({
    
     newIndex, oldIndex }) {
    
    
            const currRow = _this.fileTable.splice(oldIndex, 1)[0]
            _this.fileTable.splice(newIndex, 0, currRow)
        }
    })
},

猜你喜欢

转载自blog.csdn.net/weixin_39308542/article/details/108997575