美文网首页
element-ui table 行拖拽

element-ui table 行拖拽

作者: 不忘初心_6b23 | 来源:发表于2021-03-11 15:59 被阅读0次

    引入sortable包

    npm i sortable.js --save
    

    使用

    import Sortable from 'sortablejs'
    

    初始化

    mounted() {
        // 阻止默认行为
      document.body.ondrop = function(event) {
        event.preventDefault()
        event.stopPropagation()
      }
        this.rowDrop()
    },
    
    

    排序方法

    rowDrop() {
      const tbody = document.querySelector('.task-modal-wrapper .el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
          onEnd({ newIndex, oldIndex }) {
              const currRow = _this.crowdList.splice(oldIndex, 1)[0]
              _this.crowdList.splice(newIndex, 0, currRow)
        }
      })
    },
    

    注意: table 需要指定row-key,否则会乱序。这也是后端突然改字段,导致我找一中午排序bug问题。。。😅😅😓

    相关文章

      网友评论

          本文标题:element-ui table 行拖拽

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