Vue + Element 表格拖拽排序、树形表格拖拽排序

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

安装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:7458963256145,
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }, {
      id:1256358945623,
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄'
    }, {
      id:7485968563232,
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    }, {
      id:4230568745963,
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    }]
  }
}

表格排序(列表)

mounted () {
  // 调用 table拖拽排序 (有可能不生效,最好等表格数据获取后在调用,或加个this.$nextTick方法)
  this.rowDrop()
}

methods: {
    rowDrop() {
      const tbody = this.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      Sortable.create(tbody , {
      	animation: 300,
      	onEnd: e => {
	       	//e.oldIndex为拖动一行原来的位置,e.newIndex为拖动后新的位置
	        const targetRow = this.tableData.splice(e.oldIndex, 1)[0];
	        this.tableData.splice(e.newIndex, 0, targetRow);
	        let dragId = this.tableData[e.newIndex].id;//拖动行的id
	       	// 请求接口排序,后面具体需要什么参数,获取就行了,每个人需要不一样
	        
	   	 } 
      })
   }
}

树形表格排序(树结构)

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

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

结语

这些都是博主在项目中遇到的一些问题,如果大家在使用中有问题,请在评论区说一下吧

  • 2
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue Element UI 提供了 el-dialog 组件,但是默认情况下不支持拖拽,需要自己实现。下面是实现 el-dialog 拖拽的步骤: 1. 在 el-dialog 的 title 区域添加一个拖拽的区域,可以使用 CSS 的 cursor 属性来设置鼠标样式。 ```html <template> <el-dialog :visible.sync="dialogVisible" title="可拖拽的对话框"> <div class="dialog-header" @mousedown="startDrag"> <span>可拖拽的对话框</span> </div> <div> <!-- 对话框内容 --> </div> </el-dialog> </template> <style> .dialog-header { cursor: move; } </style> ``` 2. 在 startDrag 方法记录鼠标按下的位置和对话框的位置。 ```js export default { data() { return { dialogVisible: false, dragging: false, // 是否正在拖拽 dragX: 0, // 鼠标按下时的位置 dragY: 0, dialogLeft: 0, // 对话框的位置 dialogTop: 0, }; }, methods: { startDrag(e) { this.dragging = true; this.dragX = e.clientX; this.dragY = e.clientY; this.dialogLeft = this.$refs.dialog.getBoundingClientRect().left; this.dialogTop = this.$refs.dialog.getBoundingClientRect().top; }, }, }; ``` 3. 在监听 document 的 mousemove 和 mouseup 事件,在 mousemove 事件计算出对话框应该移动到的位置,在 mouseup 事件停止拖拽。 ```js methods: { startDrag(e) { // ... document.addEventListener('mousemove', this.drag); document.addEventListener('mouseup', this.stopDrag); }, drag(e) { if (this.dragging) { const offsetX = e.clientX - this.dragX; const offsetY = e.clientY - this.dragY; this.$refs.dialog.style.left = `${this.dialogLeft + offsetX}px`; this.$refs.dialog.style.top = `${this.dialogTop + offsetY}px`; } }, stopDrag() { this.dragging = false; document.removeEventListener('mousemove', this.drag); document.removeEventListener('mouseup', this.stopDrag); }, } ``` 完整代码如下: ```html <template> <el-dialog :visible.sync="dialogVisible" title="可拖拽的对话框" ref="dialog"> <div class="dialog-header" @mousedown="startDrag"> <span>可拖拽的对话框</span> </div> <div> <!-- 对话框内容 --> </div> </el-dialog> </template> <style> .dialog-header { cursor: move; } </style> <script> export default { data() { return { dialogVisible: false, dragging: false, // 是否正在拖拽 dragX: 0, // 鼠标按下时的位置 dragY: 0, dialogLeft: 0, // 对话框的位置 dialogTop: 0, }; }, methods: { startDrag(e) { this.dragging = true; this.dragX = e.clientX; this.dragY = e.clientY; this.dialogLeft = this.$refs.dialog.getBoundingClientRect().left; this.dialogTop = this.$refs.dialog.getBoundingClientRect().top; document.addEventListener('mousemove', this.drag); document.addEventListener('mouseup', this.stopDrag); }, drag(e) { if (this.dragging) { const offsetX = e.clientX - this.dragX; const offsetY = e.clientY - this.dragY; this.$refs.dialog.style.left = `${this.dialogLeft + offsetX}px`; this.$refs.dialog.style.top = `${this.dialogTop + offsetY}px`; } }, stopDrag() { this.dragging = false; document.removeEventListener('mousemove', this.drag); document.removeEventListener('mouseup', this.stopDrag); }, }, }; </script> ``` 这样就实现el-dialog 的拖拽功能。注意,由于拖拽是直接修改 DOM 元素的样式,如果使用了动画或者过渡效果,可能会有一些问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值