美文网首页
Vue element table 行交换

Vue element table 行交换

作者: 赛亚人之神 | 来源:发表于2019-07-28 01:51 被阅读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 属性

    相关文章

      网友评论

          本文标题:Vue element table 行交换

          本文链接:https://www.haomeiwen.com/subject/yqzyrctx.html