Vue+Element樹形表格實現(xiàn)拖拽排序示例
今天給大家分享一下樹形表格拖拽排序,樹形表格排序的教程不多,可能還會有問題,我在這里詳細(xì)給大家講解一下,如果你有這樣的需求或覺得有用,請給個關(guā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>
樹形表格排序(樹結(jié)構(gòu))
樹形表格排序?qū)崿F(xiàn)原理:把樹形的結(jié)構(gòu)轉(zhuǎn)為列表再進(jìn)行拖拽,不轉(zhuǎ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: [] // 轉(zhuǎn)換為列表的數(shù)據(jù)
}
},
mounted () {
this.rowDrop()
},
methods: {
// 將樹數(shù)據(jù)轉(zhuǎn)化為平鋪數(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) // 把樹形的結(jié)構(gòu)轉(zhuǎn)為列表再進(jìn)行拖拽
},
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 }) { // 結(jié)束拖拽
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ù)獲取后,在調(diào)用rowDrop方法
3.如果刷新了表格,會導(dǎo)致拖拽失效,需要重新添加拖拽方法this.rowDrop()
4.如果刷新表格會導(dǎo)致頁面刷新,滾動條就不在之前操作的位置,需要重新滾動頁面,體驗效果不好。解決方案就是需要記錄滾動條位置,拖拽后刷新頁面自動滾動到當(dāng)前位置,下一篇會講解記錄滾動位置,請進(jìn)入我的主頁查看
結(jié)語
到此這篇關(guān)于Vue+Element樹形表格實現(xiàn)拖拽排序示例的文章就介紹到這了,更多相關(guān)Vue Element樹形表格拖拽排序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue?Echarts報錯Initialize?failed:?invalid?dom解決方法
最近因為工作需要,用到了ECharts做圖表,也遇到了問題,就來跟大家總結(jié)分享一下,下面這篇文章主要給大家介紹了關(guān)于Vue?Echarts報錯Initialize?failed:?invalid?dom的解決方法,需要的朋友可以參考下2023-06-06
IOS上微信小程序密碼框光標(biāo)離開提示存儲密碼的完美解決方案
ios密碼框輸入密碼光標(biāo)離開之后會提示存儲密碼的彈窗,關(guān)于這樣的問題怎么解決呢,下面給大家分享IOS上微信小程序密碼框光標(biāo)離開提示存儲密碼的完美解決方案,感興趣的朋友一起看看吧2024-07-07
解決vue動態(tài)下拉菜單 有數(shù)據(jù)未反應(yīng)的問題
這篇文章主要介紹了解決vue動態(tài)下拉菜單 有數(shù)據(jù)未反應(yīng)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08

