Html 元素 拖拽 table,vue基于element table表格拖拽

element表格没有自带的拖拽排序的功能，但是可以借助第三方插件Sortablejs来实现

SortableJS中文网

页面预览：

vue基于element table表格拖拽页面预览

实现过程：

1. 安装Sortable.js

npm install sortablejs --save

2. 在需要此功能的页面中引入

import Sortable from 'sortablejs'

注意：需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。 但是不可用index，因为拖拽后index会变，会有问题。

代码：

html布局

vue基于element table表格拖拽：

:key="`col_${index}`"

:prop="dropCol[index].prop"

:label="item.label">

---

列拖拽时的数据变化：

{{dropCol}}

行拖拽时的数据变化：

{{tableData}}

js核心代码

import Sortable from 'sortablejs'

export default {

data () {

return {

col: [

{

label: '日期',

prop: 'date'

},

{

label: '姓名',

prop: 'name'

},

{

label: '地址',

prop: 'address'

}

],

dropCol: [

{

label: '日期',

prop: 'date'

},

{

label: '姓名',

prop: 'name'

},

{

label: '地址',

prop: 'address'

}

],

tableData: [

{

id: '1',

date: '2016-05-01',

name: '王小虎1',

address: '上海市普陀区金沙江路 101 弄'

},

{

id: '2',

date: '2016-05-02',

name: '王小虎2',

address: '上海市普陀区金沙江路 102 弄'

},

{

id: '3',

date: '2016-05-03',

name: '王小虎3',

address: '上海市普陀区金沙江路 103 弄'

},

{

id: '4',

date: '2016-05-04',

name: '王小虎4',

address: '上海市普陀区金沙江路 104 弄'

}

]

}

},

mounted () {

this.rowDrop()

this.columnDrop()

},

methods: {

// 行拖拽

rowDrop () {

const tbody = document.querySelector('.el-table__body-wrapper tbody')

const _this = this

Sortable.create(tbody, {

onEnd ({ newIndex, oldIndex }) {

const currRow = _this.tableData.splice(oldIndex, 1)[0]

_this.tableData.splice(newIndex, 0, currRow)

}

})

},

// 列拖拽

columnDrop () {

const wrapperTr = document.querySelector('.el-table__header-wrapper tr')

this.sortable = Sortable.create(wrapperTr, {

animation: 180,

delay: 0,

onEnd: evt => {

const oldItem = this.dropCol[evt.oldIndex]

this.dropCol.splice(evt.oldIndex, 1)

this.dropCol.splice(evt.newIndex, 0, oldItem)

}

})

}

}

}

页面预览

github地址