vue 实现element-ui 表格的行拖拽排序（Sortable）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 实现element-ui 表格的行拖拽排序（Sortable）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Sortable它是一个比较简单好用的拖拽排序工具

1.首先是安装下载Sortable （npm install sortablejs --save）

2.在要进行拖拽的页面引入Sortable （import Sortable from 'sortablejs'）

3.写个方法去处理你需要的数据，这里需要注意一下需要等待元素渲染完成后再执行此方法

mounted() {
   this.$nextTick(() => {
      this.rowDrop();
   });
}

rowDrop() {
      const that = this;
      // tbody  拿到你要去操作的拖拽元素的父节点
      const tbody = document.querySelector(
        '.el-table__body-wrapper tbody',
      );

      new Sortable(tbody, {
        animation: 150,  //定义排序动画的时间  单位是ms 
        ghostClass: 'blue-background-class',   //drop placeholder的css类名  可以不设置
        //开始拖拽
        onStart: function (e) {
          e.oldIndex;  // 父元素索引
        },
        //结束拖拽
        onEnd: function (obj) {
          const list = JSON.parse(
            JSON.stringify(that.lastList || that.roleTableList),
          );
          //obj.oldIndex;  元素在旧父元素中的旧索引
          const temp = list.splice(obj.oldIndex, 1)[0];
          //obj.newIndex;  元素在新父元素中的新索引
          list.splice(obj.newIndex, 0, temp);
          that.lastList = list;
        },
      });
    },

4.处理好数据以后再去调修改排序的接口即可完成表格的行拖拽排序工作

5.Sortable里面有很多的方法和配置项大家根据需要去参考它里面的说明http://www.sortablejs.com/文章来源地址https://www.toymoban.com/news/detail-507014.html

到了这里，关于vue 实现element-ui 表格的行拖拽排序（Sortable）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！