怎么使用Vue+Element樹(shù)形表格實(shí)現(xiàn)拖拽排序

本篇內(nèi)容主要講解“怎么使用Vue+Element樹(shù)形表格實(shí)現(xiàn)拖拽排序”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么使用Vue+Element樹(shù)形表格實(shí)現(xiàn)拖拽排序”吧!

安裝sortablejs

npm install sortablejs --save

在需要的頁(yè)面引入

import Sortable from 'sortablejs'

表格加上row-key="id"

<el-table ref="table" row-key="id" :data="tableData" >
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
</el-table>

樹(shù)形表格排序（樹(shù)結(jié)構(gòu)）

樹(shù)形表格排序?qū)崿F(xiàn)原理：把樹(shù)形的結(jié)構(gòu)轉(zhuǎn)為列表再進(jìn)行拖拽，不轉(zhuǎn)換的話(huà)，拖拽的位置是不對(duì)的，就出錯(cuò)了

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ù)數(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) // 把樹(shù)形的結(jié)構(gòu)轉(zhuǎn)為列表再進(jìn)行拖拽
      	},
      	onEnd: e => {
	       	//e.oldIndex為拖動(dòng)一行原來(lái)的位置，e.newIndex為拖動(dòng)后新的位置
	       	if (e.oldIndex !== e.newIndex) { // 根據(jù)自己項(xiàng)目需求增添?xiàng)l件限制
	       		const oldRow = this.activeRows[e.oldIndex] // 移動(dòng)的那個(gè)元素
	       		const newRow = this.activeRows[e.newIndex] // 新的元素
	       		// 請(qǐng)求接口排序，根據(jù)后端要求填寫(xiě)參數(shù)
		
	       	}
	   	 } 
      })
   }
}

這里就使用了2個(gè)方法，還有其它方法，根據(jù)自己需求來(lái)使用

方法介紹

onAdd: function (evt) { // 拖拽時(shí)候添加有新的節(jié)點(diǎn)的時(shí)候發(fā)生該事件
	console.log('onAdd.foo:', [evt.item, evt.from])
},
onUpdate: function (evt) { // 拖拽更新節(jié)點(diǎn)位置發(fā)生該事件
  	console.log('onUpdate.foo:', [evt.item, evt.from])
},
onRemove: function (evt) { // 刪除拖拽節(jié)點(diǎn)的時(shí)候促發(fā)該事件
 	 console.log('onRemove.foo:', [evt.item, evt.from])
},
onStart: function (evt) { // 開(kāi)始拖拽出發(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)
}

注意點(diǎn)

1.如果你的onEnd方法不是箭頭函數(shù)，如下面這樣，需要在上面定義一下this指向，不然會(huì)報(bào)錯(cuò)

const _this = this
Sortable.create(tbody , {
	onEnd ({ oldIndex, newIndex }) {
	
	}
})

2.添加拖拽的方法，需要等表格數(shù)據(jù)獲取到，不然有可能是空的tbody ，拖拽就不生效了。 可以在await表格數(shù)據(jù)獲取后，在調(diào)用rowDrop方法

3.如果刷新了表格，會(huì)導(dǎo)致拖拽失效，需要重新添加拖拽方法this.rowDrop()

4.如果刷新表格會(huì)導(dǎo)致頁(yè)面刷新，滾動(dòng)條就不在之前操作的位置，需要重新滾動(dòng)頁(yè)面，體驗(yàn)效果不好。解決方案就是需要記錄滾動(dòng)條位置，拖拽后刷新頁(yè)面自動(dòng)滾動(dòng)到當(dāng)前位置。

到此，相信大家對(duì)“怎么使用Vue+Element樹(shù)形表格實(shí)現(xiàn)拖拽排序”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！