美文网首页
el-table 行拖动插件

el-table 行拖动插件

作者: 浅浅_2d5a | 来源:发表于2022-04-11 17:07 被阅读0次

    安装插件
    cnpm install vuedraggable
    cnpm install sortablejs

    el-table 正常些
    引入js
    import Sortable from 'sortablejs'

    created() {
    this.nextTick(() => { this.drag() }) } methods: drag() { const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0] Sortable.create(el, { disabled: false, //开启拖拽 ghostClass: 'sortable-ghost', //拖拽样式 Animation: 150, //动画 onEnd: (e) => { //结束的方法 const arr = this.tableData arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]) this.nextTick(function() {
    this.tableData = arr
    console.log('属猪', this.tableData)
    })
    }
    })
    },

    相关文章

      网友评论

          本文标题:el-table 行拖动插件

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