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)文章希望大家以后多多支持腳本之家!
- VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解
- Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式
- vue+element表格實現(xiàn)多層數(shù)據(jù)的嵌套方式
- vue element-ui里的table中表頭與表格出現(xiàn)錯位的解決
- vue?element-ui動態(tài)橫向統(tǒng)計表格的實現(xiàn)
- vue+elementui實現(xiàn)動態(tài)控制表格列的顯示和隱藏
- Vue?elementUI表單嵌套表格并對每行進(jìn)行校驗詳解
- vue2使用?element表格展開功能渲染子表格的方式
相關(guān)文章
詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié)
這篇文章主要介紹了詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10Element樹形控件整合帶圖標(biāo)的下拉菜單(tree+dropdown+input)
Element UI 官網(wǎng)提供的樹形控件包含基礎(chǔ)的、可選擇的、自定義節(jié)點內(nèi)容的、帶節(jié)點過濾的以及可拖拽節(jié)點的樹形結(jié)構(gòu),本文實現(xiàn)了樹形控件整合帶圖標(biāo)的下拉菜單,感興趣的可以了解一下2021-07-07