使用sortabl对表格进行拖拉拽重新排序

1.安装依赖

npm install sortablejs --save

2.包裹拖拽内容

<div class="draggable" style="padding: 20px">

　　需要拖拽的内容,如表格

</div>

3.定义拖拽方法

 // 列拖拽

    columnDrop() {

        const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr');  // 这里我是对el-table中的列进行拖拽

        this.sortable = Sortable.create(wrapperTr, {

          animation: 180,

          delay: 0,

          onEnd: evt => {

          // 接下来做索引的交换

          let tempHableHeader = this.tableColumList // 先存一份临时变量表头数据

          let temp // 临时变量用于交换

          temp = tempHableHeader[evt.oldIndex]  // 保存拖拽的内容

          // 插入

          tempHableHeader.splice(evt.oldIndex, 1);

          tempHableHeader.splice(evt.newIndex, 0, temp)

          // 交换

          // tempHableHeader[evt.oldIndex] = tempHableHeader[evt.newIndex]

          // tempHableHeader[evt.newIndex] = temp

 

          // 重要的事情说三遍！！！

          // 这里一定要先把表头数据清空，然后再下一轮中去赋值，否则会渲染错误

          // 这里一定要先把表头数据清空，然后再下一轮中去赋值，否则会渲染错误

          // 这里一定要先把表头数据清空，然后再下一轮中去赋值，否则会渲染错误

          this.tableColumList = [] // 大家可以注掉试试哦

          this.$nextTick(() => {

            this.tableColumList = tempHableHeader

          })

        }

4. 挂在方法到钩子函数

mounted(){

    this.columnDrop()

  }