sortable实现elementui中表格拖拽排序

blingbling兵兵

已于 2022-10-31 10:05:58 修改

阅读量860

点赞数

分类专栏： element plus 文章标签： sortable vue elementui

于 2021-06-17 14:27:03 首次发布

本文链接：https://blog.csdn.net/weixin_40412060/article/details/117992841

版权

element plus 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.安装sortable

npm install sortablejs

2.在页面中使用

html

<el-button
              type="text"
              icon="el-icon-d-caret"
              v-show="!sort"
              size="small"
              class="move"
            ></el-button>

<script>
import Sortable from "sortablejs";
export default {
 mounted() {
    this.dragSort()
    
  },
methods: {
    dragSort() {
      const el = this.$refs.singleTable.$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      this.sortable = Sortable.create(el, {
        handle: ".move",
        onEnd: e => {
          //onEnd是结束拖拽时触发，onUpdate是列表内元素顺序更新的时候触发，更多请看文末配置项
          //e.oldIndex为拖动一行原来的位置，e.newIndex为拖动后新的位置
          const targetRow = this.tableData.splice(e.oldIndex, 1)[0];
          this.tableData.splice(e.newIndex, 0, targetRow);
          let dragId = this.tableData[e.newIndex].showNo; //拖动行的showNo
          let aaaaa = this.tableData[e.newIndex].jnlNo; //拖动行的jnlNo
          let oneId, twoId;
          //拖动行的前一行
          if (this.tableData[e.newIndex - 1]) {
            oneId = this.tableData[e.newIndex - 1].showNo;
          } else {
            oneId = "";
          }
          //拖动行的后一行
          if (this.tableData[e.newIndex + 1]) {
            twoId = this.tableData[e.newIndex + 1].showNo;
          } else {
            twoId = "";
          }
          console.log("拖动行：" + dragId);
          console.log("拖动行：" + aaaaa);
          console.log("前一行：" + oneId);
          console.log("后一行：" + twoId);
          //然后就可以Sortable发送请求了......
          // this.getList()
        }
      });
    },
}
}
</script>