第一步,先随便创建element表格
< el-table ref = " dragTable" :data = " tableData" style = " width : 100%" border fit highlight-current-row > < el-table-column label = " 日期" width = " 180" > < template slot-scope = " { row }" > < span> {{ row.date }}</ span> </ template> </ el-table-column> < el-table-column label = " 姓名" width = " 180" > < template slot-scope = " { row }" > < span> {{ row.name }}</ span> </ template> </ el-table-column> < el-table-column prop = " address" label = " 地址" > </ el-table-column> < el-table-column label = " 拖拽" > < template> < i style = " cursor : pointer; " class = " el-icon-setting" > </ i> </ template> </ el-table-column> </ el-table>
第二步,里面的数据源tableData直接复制饿了么上的
第三步,需要安装sortablejs库并且在头部引入
import Sortable from 'sortablejs'
第四步,通过ref获取table,这里给table的ref设置为dragTable
第五步,就是获取table然后设置它的一些属性,比如拖拽时的CSS,拖拽时的一些事件等,然后需要注意的是需要再生命周期函数mounted里调用这个方法,因为这个方法可以获取dom
data ( ) { return { sortable : null , } ; } , mounted ( ) { this . dragTable ( ) } , methods : { dragTable ( ) { const el = this . $refs. dragTable. $el. querySelectorAll ( '.el-table__body-wrapper > table > tbody' ) [ 0 ] this . sortable = Sortable. create ( el, { onEnd : ( ) => { alert ( '成功' ) } } ) } } ,
第六步,实现效果