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

最近在使用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)

相关推荐

  • Elementui表格组件+sortablejs实现行拖拽排序的示例代码

    前言 运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便 效果 实现方式 template部分 <el-table v-loading="loading" :default-sort="{prop: 'sortNum', order: 'ascending'}" :data="list" border align="left" > <el-tab

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

    最近在使用element table的时候,经常会遇到排序的问题,如果只是简单的排序的话,element官方已经给出了指定的方法 //table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}"> //设置sortable属性时出现排序按钮 <el-table-colum

  • element表格行列拖拽的实现示例

    element ui 表格没有自带的拖拽排序的功能,只能借助第三方插件Sortablejs来实现,先来看一下动态图,效果是不是你们想要的. 首先需要安装Sortable.js npm install sortablejs --save 然后引用 import Sortable from 'sortablejs' 需要注意的是element table务必指定row-key,row-key必须是唯一的,如ID,不然会出现排序不对的情况. ###示例代码 <template> <div st

  • 浅谈element中InfiniteScroll按需引入的一点注意事项

    大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项. 针对前面element 按需引入的一些配置这里就不再详细介绍了. 那么这里讲的是在main.js写入以下代码. import { InfiniteScroll } from 'element-ui'; Vue.use(InfiniteScroll) 好,这样引入.注册了,那么我们接下来做得事情就是在页面使用它. <template> <ul class="inf

  • vue element el-transfer增加拖拽功能

    芯资管项目要求el-transfer增加拖拽排序,左右上下互相拖拽功能: 原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs 首先安装 sudo npm i sortablejs --save-dev html代码 <template> <el-transfer ref="transfer" id="transfer" v-model="value" :data="data"> <

  • 浅谈element的$notify注意点

    我的初衷是把element-ui的$notify通知封装成一个组件,登录成功后调用获取低库存接口,如果获取接口的列表当中库存大于0,则显示这个通知,并且在文本当中提供点击事件. 因此,首先想到的就是使用dangerouslyUseHTMLString属性,可以插入html字符串 export default { methods: { open12() { this.$notify({ title: 'HTML 片段', dangerouslyUseHTMLString: true, messag

  • 针对后台列表table拖拽比较实用的jquery拖动排序

    现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码,很简单: 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title>

  • 关于Element UI table 顺序拖动方式

    目录 Element UI table 顺序拖动 基本使用 element关于table拖拽排序问题 Element UI table 顺序拖动 使用Sortable.js插件.对element-ui中的el-table进行拖拽行排序. new Sortable(example1, { animation: 150, ghostClass: 'blue-background-class' }); 官网: [1] Sortable.js官网配置项说明等 [2] Sortable更多使用示例 基本使

  • Vue+Element树形表格实现拖拽排序示例

    目录 安装sortablejs 在需要的页面引入 表格加上row-key="id" 树形表格排序(树结构) 方法介绍 注意点 结语 今天给大家分享一下树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用. 安装sortablejs npm install sortablejs --save 在需要的页面引入 import Sortable from 'sortablejs' 表格加上

  • vue3 elmentPlus table实现列宽可拖拽功能

    el-table 里边的border属性,设置之后表格即可直接拖拽,下文内容是相关扩展功能的实现 最近公司项目里边需求要让表格的宽度可拖动,我们的公司的项目有vue2的也有vue3的,表格分别使用了element UI和element Plus,前者的社区比较丰富,我们使用了mizuka-wu/el-table-draggable 但是对于后者,我查到社区相关的插件并不多,但也找到了guolaopi/element-plus-table-dragable-demo 把demo下载下来之后,我发现

  • 对google个性主页的拖拽效果的js的完整注释[转]

    作者:Tin出处:http://www.blogjava.net/iamtin/archive/2006/04/27/43668.html代码:http://www.blogjava.net/Files/iamtin/google_drag.rar 复制代码 代码如下: // 工具类,使用Util的命名空间,方便管理  var  Util  =   new  Object(); // 获取http header里面的UserAgent,浏览器信息  Util.getUserAgent  =  n

随机推荐