element-ui table组件实现可拖拽效果

7 篇文章 0 订阅

最近接到一个表格拖拽并改变排序的需求
那么首先需要实现表格拖拽

一.引入第三方插件

1.引入sortable.js的包: npm install sortable.js --save
2.或者npm i -S vuedraggable
  vuedraggable依赖 Sortable.js,所以下载了vuedraggable,我们便可以直接引入Sortable使用Sortable的特性。
  vuedraggable是Sortable一种加强,实现组件化的思想,可以结合Vue,使用起来更方便

二.使用sortable

以sortable为例子,在我们需要使用sortable的文件中
import Sortable from 'sortablejs'

三.代码展示

如果要使用sortable,那么element table务必指定row-key,并且row-key必须是唯一的,如ID,不然会出现排序不对的情况,一般情况下浏览器会直接报错。

1.html布局
<el-table
   	size='small'
	:data='videoTable'
	style='width:100%'
	row-key='sn'
	@cell-mouse-enter.once='rowDrop'
	:row-class-name='rowClassName'
>
	<el-table-column width='50'>
		<i class='el-icon-s-operation' style='font-size: 14px'></i>
	</el-table-column>
	<el-table-column prop='ordering' label='序号' width='50' type='index'></el-table-column>
	<el-table-column prop='sn' label='内容ID' min-width='120'></el-table-column>
	<el-table-column prop='title' label='内容标题' min-width='120'></el-table-column>
	<el-table-column prop='fileSize' label='大小' min-width='80'>
		<template slot-scope='scope'>
			<span>{{ scope.row.fileSize }}M</span>
		</template>
	</el-table-column>
	<el-table-column min-width='80'>
		<template slot-scope='scope'>
			<el-button type='text' size='small' @click='deleteVideo(scope.row)'>删除</el-button>
		</template>
	</el-table-column>
</el-table>

因为需要,我代码中使用得是sn,但同id一样也是唯一的
因为要排序,所以应用了element-ui table组件的Table-column Attributes: type
type=index时,会通过传递index属性来自定义索引,从1开始,这样每次拖拽之后都会重新自动排序

2.核心js
//行拖拽
methods: {
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const self = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = self.tableData.splice(oldIndex, 1)[0]
          self.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
//列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    },
},
mounted() {
    this.rowDrop()
    this.columnDrop()
},
注意

在这里我遇到了一个问题,就是他会报出一个错误,大致原因就是因为table中的数组内容还未渲染完成就调用了拖拽的方法,没有el元素去支持这个方法的运行
这里我以拖拽行为例,因为我只用到了拖拽行,当我console.log(tbody)发现此时输出的并不是table的数据,而是null

解决方案

1.我使用的解决方案之一便是刚开始不调用拖拽的方法,使用el-table内置的方法@cell-mouse-enter.once='rowDrop'
当进入到表格的每一个column中都会触发这个方法,但是这样做会导致我们多次调用这个方法,浪费资源,所以这是需要once来让此方法只调用一次,如果不太懂once的作用可以去vue文档中看一下。
2.这个方法就更容易理解setTimeout,延缓一段时间再去执行,数据渲染的时间是很快的,所以设置的时间也不宜过长,我设置了300ms,虽然可能还不是最短时间,但是刚好也不会影响接下来的操作。

参考http://www.cnblogs.com/jin-zhe/p/10181852.html

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值