当前位置: 首页 > Web前端 > JavaScript

Vue2使用sortablejs实现el-table行拖动

时间:2023-03-27 11:56:04 JavaScript

修改js部分setSort(){consttable=this.$refs[this.tableKey].$refs.multipleTable;//获取el-table的tbody的dom节点constel=table.$el.querySelectorAll('.el-table__body-wrapper>table>tbody')[0];this.sortable=Sortable.create(el,{ghostClass:'sortable-ghost',onEnd:evt=>{consttargetRow=this.dataList.splice(evt.oldIndex,1)[0];//this.dataList是table的数据,用splice代替,达到数据更新的目的this.dataList.splice(evt.newIndex,0,targetRow);this.$nextTick(()=>{table.doLayout();})}})},csspart.sortable-ghost{//类不透明度绑定在setSort:.8;颜色:#fff!important;background:#00BBB3!重要;}::v-deep.editTable.el-table__body:hover{cursor:move;}注意:使用el-table拖拽行时,必须使用属性row-key,这个需要diff;拖动后,如果表格错位,可以调用el-table的doLayout方法更新布局。这最好在this.$nextTick();中执行;