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

实现效果：

（1）el-table的行拖拽（可整行拖拽）

（2）页面中有el-table，el-table中点击出现弹框，弹框中有el-table，实现弹框中的表格拖拽

 实现方法：

以上两种方式的共同步骤

1、安装sortablejs

cnpm install sortablejs --save

2.在对应的vue页面种引入Sortable

import Sortable from ‘sortablejs’

3.使用el-table需有唯一的key值，如id

<el-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-column prop="address" label="地址"></el-table-column>
</el-table>

4.vue 页面中的tableData数据

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 弄'
    }]
  }
}

5.vue页面中使用mounted挂载行拖拽的方法，使其页面加载即可调用

mounted () {
  // 行拖拽排序
  this.rowDrop()
}

6.行拖拽方法

methods: {
  // 行拖拽
  rowDrop () {
    let tbody = document.querySelector('.el-table__body-wrapper tbody')
    let _this = this
    Sortable.create(tbody, {
      // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
      group: {
        name: 'words',
        pull: true,
        put: true
      },
      animation: 150, // ms, number 单位：ms，定义排序动画的时间
      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)
      }
    })
  }
}

以上行拖拽的方法适用于实现效果的第一种情况，即根据querySelector('.el-table__body-wrapper tbody')可找到页面中的el-table实现拖拽。

实现el-dialog中的el-table拖拽方式为：

template中的弹框样式：

<div class="data-box">
			<el-dialog title="xxxxx" :visible.sync="showDialog" width="42%">
				<el-table class="drow_table">el-table>
			el-dialog>
		div>

在点击出现弹框的方法处初始化行拖拽的方法：

nextTick的使用十分关键，避免因表格没有加载完成出现查询不到el-table从而无法使用行拖拽的情况。

showData() {
				this.$nextTick(() => {
					this.rowDrop()
				})
			
		},

且在行拖拽的方法进行querySelector的查找时，需对查询到dialog的el-table的类中，即:

	rowDrop() {
			let tbody = document.querySelector('.drow_table .el-table__body-wrapper tbody')
// 以下与上面行拖拽的方法相同
}

这样就实现了el-table的行拖拽功能。

本博客参考了Vue Element 表格实现拖拽排序_阳光的男夹克的博客-CSDN博客_element table 拖拽排序