vue中el-table的行拖拽和el-dialog中表格的行拖拽

vue 中el-table行拖拽使用

下载

npm install sortablejs --save

引用

import Sortable from 'sortablejs'

页面中的行拖拽

表格数据一定要有唯一标识加上row-key值

 <el-table 
   :data="userGgList"
   ref="userData"
   class="drow_table"
   row-key="userId"
    border>

行拖拽方法

  rowDrop() {
	let tbody = document.querySelector('.drow_table .el-table__body-wrapper tbody')
//获取当前table元素
   // const el = this.$refs.userData.$el.querySelector('.el-table__body-wrapper > table > tbody')
    console.log(tbody,11);
    const that = this;
    Sortable.create(tbody, {
					// 结束拖拽后的回调函数
					onEnd({ newIndex, oldIndex }) {
						console.log('拖动了行，当前序号：' + newIndex);
						const currentRow = that.userGgList.splice(oldIndex, 1)[0];
						that.userGgList.splice(newIndex, 0, currentRow);
					}
				})
      
 },

列拖拽方法

 //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('..drow_table .el-table__body-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
       
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }

页面挂载时化调用方法

mounted(){
this.rowDrop()
}

2 el-dialog弹窗中的表格进行使用时

1.获取元素 可能写法不同，剩下方法一样

方法使用时在点击打开弹窗时进行使用

setRow(row){
        console.log(row);
      
在点击出现弹框的方法处初始化行拖拽的方法：

nextTick的使用十分关键，避免因表格没有加载完成出现查询不到el-table从而无法使用行拖拽的情况。        this.$nextTick(() => {
					this.rowDrop()
				})

       
      },