el-table拖拽排序,elementui 表格拖动排序

　　本文主要介绍了元素关于桌子拖拽排序问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

　　//表格的默认排序方式是按身份排序顺序为递减这里可以改成其它比如命令

　　El-table:data= table data :default-sort= { prop: ID ，order: descending}

　　//设置可分类的属性时出现排序按钮

　　El-表格-列属性=ID 标签=座号可分类的

　　/el-table

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

　　sortablejs GitHub地址

　　//安装sortable.js

　　与新公共管理理论一起安装：

　　$ npm安装排序表-保存

　　//在组件内引入

　　从"排序表"导入可排序的

　　//为需要拖拽排序的表格添加裁判员属性

　　el-table ref=dragTable

　　//在数据渲染完毕添加拖拽事件

　　已创建(){

　　this.getBanner()

　　},

　　方法：{

　　异步getBanner(val){

　　等待apiGetBanner().然后((res)={

　　这个。横幅表=研究数据。数据；

　　})

　　这个。老单子=这个。横幅桌子。map(v=v . id)；

　　这个。新列表=这个。旧名单。slice()；

　　这个. nextTick(()={

　　this.setSort() //数据渲染完毕执行方法

　　})

　　}

　　setSort() {

　　const el=this .$参考文献。拖动表格。$ El。查询选择器全部(。El-table _ _主体包装表 tbody

　　)[0];

　　这个。可排序=可排序。创建(El，{

　　//放置占位符的类名，

　　幽灵类："可排序的幽灵",

　　setData:函数（数据传输){

　　dataTransfer.setData(Text ，)

　　},

　　//拖拽结束执行，evt执向拖拽的参数

　　onEnd: evt={

　　//判断是否重新排序

　　if(evt.oldIndex！==evt.newIndex){

　　let data={

　　id:这个。横幅表。旧索引].id，

　　横幅_订单：evt.newIndex

　　}

　　//数据提交失败则恢复旧的排序

　　apiPutBanner(数据)。catch(()={

　　const目标行=this。横幅桌子。拼接(evt。旧索引，1)[0]；

　　这个。横幅桌子。拼接(evt。新索引，0，目标行)；

　　})

　　}

　　}

　　})

　　}

　　}

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

　　//行拖拽

　　rowDrop() {

　　const tbody=document。查询选择器(.El-table _ _ body-wrapper tbody’)

　　const _this=这个

　　Sortable.create(tbody，{

　　onEnd({ newIndex，oldIndex }) {

　　const currRow=_ this。表格数据。拼接(ol索引，1)[0]

　　_这个。表格数据。拼接(新索引，0，当前行)

　　}

　　})

　　},

　　//列拖拽

　　columnDrop() {

　　const wrap pertr=文档。查询选择器(.El-table _ _ header-wrapper tr’)

　　这个。可排序=可排序。创建(wrap pertr，{

　　动画：180,

　　延迟：0,

　　onEnd: evt={

　　const旧项目=this。drop col[evt。旧索引]

　　这个。下降列拼接(evt。旧索引，1)

　　这个。下降列拼接(evt。新索引，0，oldItem)

　　}

　　})

　　}

　　到此这篇关于浅谈元素关于桌子拖拽排序问题的文章就介绍到这了，更多相关元素表拖拽排序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。