Vue+Element树形表格实现拖拽排序示例

目录

• 安装sortablejs
• 在需要的页面引入
• 表格加上row-key="id"
• 树形表格排序（树结构）
• 方法介绍
• 注意点
• 结语

今天给大家分享一下树形表格拖拽排序，树形表格排序的教程不多，可能还会有问题，我在这里详细给大家讲解一下，如果你有这样的需求或觉得有用，请给个关注或收藏一下吧，方便后期查看使用。

安装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>

树形表格排序（树结构）

树形表格排序实现原理：把树形的结构转为列表再进行拖拽，不转换的话，拖拽的位置是不对的，就出错了

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: [] // 转换为列表的数据
  }
},
mounted () {
	this.rowDrop()
},
methods: {
 	// 将树数据转化为平铺数据
	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) { // 根据自己项目需求增添条件限制
	       		const oldRow = this.activeRows[e.oldIndex] // 移动的那个元素
	       		const newRow = this.activeRows[e.newIndex] // 新的元素
	       		// 请求接口排序，根据后端要求填写参数
		
	       	}
	   	 } 
      })
   }
}

这里就使用了2个方法，还有其它方法，根据自己需求来使用

方法介绍

onAdd: function (evt) { // 拖拽时候添加有新的节点的时候发生该事件
	console.log('onAdd.foo:', [evt.item, evt.from])
},
onUpdate: function (evt) { // 拖拽更新节点位置发生该事件
  	console.log('onUpdate.foo:', [evt.item, evt.from])
},
onRemove: function (evt) { // 删除拖拽节点的时候促发该事件
 	 console.log('onRemove.foo:', [evt.item, evt.from])
},
onStart: function (evt) { // 开始拖拽出发该函数
 	 console.log('onStart.foo:', [evt.item, evt.from])
},
onSort: function (evt) { // 发生排序发生该事件
  	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方法不是箭头函数，如下面这样，需要在上面定义一下this指向，不然会报错

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

2.添加拖拽的方法，需要等表格数据获取到，不然有可能是空的tbody ，拖拽就不生效了。 可以在await表格数据获取后，在调用rowDrop方法

3.如果刷新了表格，会导致拖拽失效，需要重新添加拖拽方法this.rowDrop()

4.如果刷新表格会导致页面刷新，滚动条就不在之前操作的位置，需要重新滚动页面，体验效果不好。解决方案就是需要记录滚动条位置，拖拽后刷新页面自动滚动到当前位置，下一篇会讲解记录滚动位置，请进入我的主页查看

结语

到此这篇关于Vue+Element树形表格实现拖拽排序示例的文章就介绍到这了,更多相关Vue Element树形表格拖拽排序内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！