Vue+Element樹形表格實現(xiàn)拖拽排序示例
更新時間：2022年08月07日 11:19:12 作者：前端無名打工人
本文主要介紹了Vue+Element樹形表格實現(xiàn)拖拽排序示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
今天給大家分享一下樹形表格拖拽排序，樹形表格排序的教程不多，可能還會有問題，我在這里詳細給大家講解一下，如果你有這樣的需求或覺得有用，請給個關注或收藏一下吧，方便后期查看使用。
安裝sortablejs
npm install sortablejs --save
在需要的頁面引入
import Sortable from 'sortablejs'
表格加上row-key="id"
<el-table ref="table" row-key="id" :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> </el-table>
樹形表格排序（樹結構）
樹形表格排序實現(xiàn)原理：把樹形的結構轉為列表再進行拖拽，不轉換的話，拖拽的位置是不對的，就出錯了
data() {
return {
tableData: [
{
id: 1,
name: 'AAA',
level: 1,
children: [
{
id: 2,
name: 'A-1',
level: 2
}
]
},
{
id: 3,
name: 'BBB',
level: 1,
children: []
}
],
activeRows: [] // 轉換為列表的數(shù)據(jù)
}
},
mounted () {
this.rowDrop()
},
methods: {
// 將樹數(shù)據(jù)轉化為平鋪數(shù)據(jù)
treeToTile (treeData, childKey = 'children') {
const arr = []
const expanded = data => {
if (data && data.length > 0) {
data.filter(d => d).forEach(e => {
arr.push(e)
expanded(e[childKey] || [])
})
}
}
expanded(treeData)
return arr
},
rowDrop() {
const tbody = this.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
Sortable.create(tbody , {
animation: 300,
onMove: () => {
this.activeRows = this.treeToTile(this.tableData) // 把樹形的結構轉為列表再進行拖拽
},
onEnd: e => {
//e.oldIndex為拖動一行原來的位置，e.newIndex為拖動后新的位置
if (e.oldIndex !== e.newIndex) { // 根據(jù)自己項目需求增添條件限制
const oldRow = this.activeRows[e.oldIndex] // 移動的那個元素
const newRow = this.activeRows[e.newIndex] // 新的元素
// 請求接口排序，根據(jù)后端要求填寫參數(shù)
}
}
})
}
}
這里就使用了2個方法，還有其它方法，根據(jù)自己需求來使用
方法介紹
onAdd: function (evt) { // 拖拽時候添加有新的節(jié)點的時候發(fā)生該事件
console.log('onAdd.foo:', [evt.item, evt.from])
},
onUpdate: function (evt) { // 拖拽更新節(jié)點位置發(fā)生該事件
console.log('onUpdate.foo:', [evt.item, evt.from])
},
onRemove: function (evt) { // 刪除拖拽節(jié)點的時候促發(fā)該事件
console.log('onRemove.foo:', [evt.item, evt.from])
},
onStart: function (evt) { // 開始拖拽出發(fā)該函數(shù)
console.log('onStart.foo:', [evt.item, evt.from])
},
onSort: function (evt) { // 發(fā)生排序發(fā)生該事件
console.log('onUpdate.foo:', [evt.item, evt.from])
},
onEnd ({ newIndex, oldIndex }) { // 結束拖拽
let currRow = _this.tableData.splice(oldIndex, 1)[0]
_this.tableData.splice(newIndex, 0, currRow)
}
注意點
1.如果你的onEnd方法不是箭頭函數(shù)，如下面這樣，需要在上面定義一下this指向，不然會報錯
const _this = this
Sortable.create(tbody , {
onEnd ({ oldIndex, newIndex }) {
}
})
2.添加拖拽的方法，需要等表格數(shù)據(jù)獲取到，不然有可能是空的tbody ，拖拽就不生效了。 可以在await表格數(shù)據(jù)獲取后，在調用rowDrop方法
3.如果刷新了表格，會導致拖拽失效，需要重新添加拖拽方法this.rowDrop()
4.如果刷新表格會導致頁面刷新，滾動條就不在之前操作的位置，需要重新滾動頁面，體驗效果不好。解決方案就是需要記錄滾動條位置，拖拽后刷新頁面自動滾動到當前位置，下一篇會講解記錄滾動位置，請進入我的主頁查看
結語
到此這篇關于Vue+Element樹形表格實現(xiàn)拖拽排序示例的文章就介紹到這了,更多相關Vue Element樹形表格拖拽排序內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue fetch中的.then()的正確使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了web項目開發(fā)中會出現(xiàn)2個Token原因的解析以及實現(xiàn)的示例代碼，有需要的同學可以借鑒參考下，希望可以有所幫助2021-09-09
Vue?Echarts報錯Initialize?failed:?invalid?dom解決方法
最近因為工作需要,用到了ECharts做圖表,也遇到了問題,就來跟大家總結分享一下,下面這篇文章主要給大家介紹了關于Vue?Echarts報錯Initialize?failed:?invalid?dom的解決方法,需要的朋友可以參考下2023-06-06
ios密碼框輸入密碼光標離開之后會提示存儲密碼的彈窗,關于這樣的問題怎么解決呢,下面給大家分享IOS上微信小程序密碼框光標離開提示存儲密碼的完美解決方案,感興趣的朋友一起看看吧2024-07-07
在項目需求中我們會遇到國際化的中英文切換,這篇文章主要給大家介紹了關于前端VUE雙語實現(xiàn)方案的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08
彈窗是我們開發(fā)中經(jīng)常遇到的一個功能,下面這篇文章主要給大家介紹了關于vue如何通過點擊事件彈出彈窗頁面的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
讓我們來回顧下Vue的介紹,可以發(fā)現(xiàn)Vue 最顯著的一個功能是響應系統(tǒng)。那么它的實現(xiàn)原理有又是如何呢?下面小編和大家來一起學習一下2019-05-05
這篇文章主要為大家詳細介紹了vue.js devtools遇到問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家詳細介紹了Vue實現(xiàn)數(shù)字時鐘效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
解決vue動態(tài)下拉菜單 有數(shù)據(jù)未反應的問題
這篇文章主要介紹了解決vue動態(tài)下拉菜單 有數(shù)據(jù)未反應的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08