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

标签：tableColumList sortabl temp 表格 拖拉 表头 tempHableHeader evt 拖拽

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()   }      

标签：tableColumList,sortabl,temp,表格,拖拉,表头,tempHableHeader,evt,拖拽
From： https://www.cnblogs.com/luzanzan/p/17356175.html