Vue element table 行交换

2019-07-28  本文已影响0人  赛亚人之神
  1. 安装,官网地址 http://rubaxa.github.io/Sortable/
npm install sortablejs --save
  1. .vue 文件中引入
import Sortable from 'sortablejs'
  1. 添加 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 属性

上一篇下一篇

猜你喜欢

热点阅读