第一步，先隨便創(chuàng)建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>
第二步，里面的數(shù)據(jù)源tableData直接復(fù)制餓了么上的
第三步，需要安裝sortablejs庫并且在頭部引入
import Sortable from 'sortablejs'
第四步，通過ref獲取table，這里給table的ref設(shè)置為dragTable
文章來源：http://www.zghlxwxcb.cn/news/detail-668881.html
第五步，就是獲取table然后設(shè)置它的一些屬性，比如拖拽時(shí)的CSS，拖拽時(shí)的一些事件等，然后需要注意的是需要再生命周期函數(shù)mounted里調(diào)用這個(gè)方法，因?yàn)檫@個(gè)方法可以獲取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('成功')
}
})
}
},
第六步，實(shí)現(xiàn)效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-668881.html
到了這里，關(guān)于實(shí)現(xiàn)簡單的element-table的拖拽效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
