• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

浅谈element关于table拖拽排序问题

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

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

sortablejs GitHub地址

//安装sortable.js
Install with NPM:

$ npm install sortablejs --save

//在组件内引入
import Sortable from 'sortablejs'

//为需要拖拽排序的表格添加ref属性
<el-table  ref="dragTable">

//在数据渲染完毕添加拖拽事件
created(){
   this.getBanner()
},
methods:{
 async getBanner(val){
          await apiGetBanner().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() {
        const el = this.$refs.dragTable.$el.querySelectorAll(
          '.el-table__body-wrapper > table > tbody'
        )[0];
        this.sortable = Sortable.create(el, {
         // Class name for the drop placeholder,
          ghostClass: 'sortable-ghost', 
                setData: function(dataTransfer) {
                dataTransfer.setData('Text', '')
            },
           //拖拽结束执行,evt执向拖拽的参数
           onEnd: evt => {
              //判断是否重新排序
              if(evt.oldIndex !== evt.newIndex){
                  let data = {
                     id:this.bannerTable[evt.oldIndex].id,
                     banner_order:evt.newIndex
                  }
                  //数据提交失败则恢复旧的排序
                  apiPutBanner(data).catch(()=>{
                     const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];
                     this.bannerTable.splice(evt.newIndex, 0, targetRow);
                  })
              }
            }
        })
    }
}

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

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

到此这篇关于浅谈element关于table拖拽排序问题的文章就介绍到这了,更多相关element table拖拽排序内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
element表单验证如何清除校验提示语发布时间:2022-02-05
下一篇:
element表格去掉表头的实现方法发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap