第一步,先随便创建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 ( '成功' )
}
} )
}
} ,
第六步,实现效果