Element?UI?table顺序拖动方式是什么

今天主机评测网小编给大家分享一下ElementUItable顺序拖动方式是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

Element UI table 顺序拖动

使用Sortable.js插件。对element-ui中的el-table进行拖拽行排序。

newSortable(example1,{animation:150,ghostClass:'blue-background-class'});

官网：

[1] Sortable.js官网配置项说明等

[2] Sortable更多使用示例

基本使用

1、安装

npminstallsortablejs--save

2、引用

importSortablefrom'sortablejs'

3、使用

<el-tableid="table":data="list"row-key="id"><el-table-columnprop="name"label="称"width="180"/><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonclass="handle"size="mini"><iclass="el-icon-rank"/>移动</el-button></template></el-table-column></el-table>

<script>//引用SortableimportSortablefrom'sortablejs'exportdefault{data(){return{list:[]}},mounted(){this.rowDrop();},methods:{//行拖拽,排序方法rowDrop(){//获取对象constel=document.querySelector('#ability-table.el-table__body-wrappertbody')constself=this//配置varops={handle:".handle",onEnd({newIndex,oldIndex}){self.list.splice(newIndex,0,self.list.splice(oldIndex,1)[0])constnewArray=self.list.slice(0)newArray.forEach((value,index)=>{value.orderNum=index+1//序号为index+1self.$set(newArray,index,value)self.list=[]//self.$nextTick(()=>{self.list=newArray?newArray:[]})}Sortable.create(el,ops)},}</script>

说明：

orderNum：为排序号

handle： 使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动

Array.splice() 方法有三个参数：

• index ：规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

• howmany：要删除的项目数量。如果设置为 0，则不会删除项目。

• item1, ..., itemX ：向数组添加的新项目。

注意：

• newArray = Array.splice(0): 表示将原数组赋给新数组，并将原数组清空。

• 要在el-table渲染后调用 this.rowDrop(); 方法

• 组件绑定是根据Id绑定的：document.querySelector('#ability-table .el-table__body-wrapper tbody')，要注意父组件Id和子组件Id不要重名，否则会优先绑定到父组件对应的Id元素。

element关于table拖拽排序问题

最近在使用element table的时候，经常会遇到排序的问题，如果只是简单的排序的话，element官方已经给出了指定的方法

//table的默认排序方式是按ID排序顺序为递减这里可以改成其它比如order<el-table:data="tableData":default-sort="{prop:'ID',order:'descending'}">//设置sortable属性时出现排序按钮<el-table-columnprop="ID"label="座号"sortable></el-table>

但是，element官方组件并不支持拖拽排序，我在这里引入sortablejs实现拖拽排序的功能

sortablejs GitHub地址

//sortablejsGitHub地址github/SortableJS/Sortable#readme

//安装sortable.jsInstallwithNPM:$npminstallsortablejs--save//在组件内引入importSortablefrom'sortablejs'//为需要拖拽排序的表格添加ref属性<el-tableref="dragTable">//在数据渲染完毕添加拖拽事件created(){this.getBanner()},methods:{asyncgetBanner(val){awaitapiGetBanner().then((res)=>{this.bannerTable=res.data.data;})this.oldList=this.bannerTable.map(v=>v.id);this.newList=this.oldList.slice();this.$nextTick(()=>{this.setSort()//数据渲染完毕执行方法})}setSort(){constel=this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper>table>tbody')[0];this.sortable=Sortable.create(el,{//Classnameforthedropplaceholder,ghostClass:'sortable-ghost',setData:function(dataTransfer){dataTransfer.setData('Text','')},//拖拽结束执行,evt执向拖拽的参数onEnd:evt=>{//判断是否重新排序if(evt.oldIndex!==evt.newIndex){letdata={id:this.bannerTable[evt.oldIndex].id,banner_order:evt.newIndex}//数据提交失败则恢复旧的排序apiPutBanner(data).catch(()=>{consttargetRow=this.bannerTable.splice(evt.oldIndex,1)[0];this.bannerTable.splice(evt.newIndex,0,targetRow);})}}})}}

如果需要列拖拽的话，可以参考下面的代码，和上面是一样的原理，在这里我就不赘述了

//行拖拽rowDrop(){consttbody=document.querySelector('.el-table__body-wrappertbody')const_this=thisSortable.create(tbody,{onEnd({newIndex,oldIndex}){constcurrRow=_this.tableData.splice(oldIndex,1)[0]_this.tableData.splice(newIndex,0,currRow)}})},//列拖拽columnDrop(){constwrapperTr=document.querySelector('.el-table__header-wrappertr')this.sortable=Sortable.create(wrapperTr,{animation:180,delay:0,onEnd:evt=>{constoldItem=this.dropCol[evt.oldIndex]this.dropCol.splice(evt.oldIndex,1)this.dropCol.splice(evt.newIndex,0,oldItem)}})}

以上就是“ElementUItable顺序拖动方式是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注主机评测网行业资讯频道。

上一篇：MySQL数据库完全备份与增量备份怎么实现

下一篇：Go语言底层原理互斥锁的实现原理是什么

---