Vue element table 行交换

1. 安装，官网地址 http://rubaxa.github.io/Sortable/

npm install sortablejs --save

2. .vue 文件中引入

import Sortable from 'sortablejs'

3. 添加 methods

//行拖拽
            rowDrop() {
              const tbody = document.querySelector('.el-table__body-wrapper tbody')
              const _this = this
              Sortable.create(tbody, {
                onEnd({ newIndex, oldIndex }) {
                  const currRow = _this.tableData.splice(oldIndex, 1)[0]
                  _this.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)
                }
              })
            },

注意 el-table 必须指定 row-key 属性