Vue+element+sortablejs<表格拖拽排序>

1634021177543.jpg

需求: 拖动表格进行排序，把最终的表格顺序传递给后端

这里主要用到的是 sortablejs，如果你想了解更多，可以 👉 参考这篇文章
👍或者想实现排序或者跨列表拖拽可以参考这边文章~~~ vuedraggable<跨列表拖拽>

使用

npm install sortablejs --save

  /** 此处省略了element-ui表格的相关代码  */
  ...
  import Sortable from 'sortablejs'
  ...
    mounted() {
      this.$nextTick(() => {
        this.rowDrop()
      })
    }
  ...
      /** 行拖拽方法  */
      rowDrop() {
       // 获取到element-ui封装的表格标签
        const tbody = document.querySelector(' .el-table__body-wrapper tbody');
        const _this = this;
        Sortable.create(tbody, {
          animation: 180,
          delay: 0,
          onEnd({
            newIndex,
            oldIndex
          }) {
            const currRow = _this.tableData.splice(oldIndex, 1)[0];
            _this.tableData.splice(newIndex, 0, currRow);
          },
        });
      },

可能对你有帮助

1.如果遇到拖动完，表格样式并没有更新，数据缺更新的话，可以尝试在 element-ui 的表格组件加上 row-key试下;
2.vue --- 作用域插槽;
3.其他的拖拽方式
4.vuedraggable<跨列表拖拽>

---