el-table支持行拖动

最新推荐文章于 2024-08-21 11:09:28 发布

小乔FEer

最新推荐文章于 2024-08-21 11:09:28 发布

阅读量221

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/oucqsy/article/details/140839676

版权

<template>
  <div ref="sortable-wrapper">
    <slot />
  </div>
</template>

<script>
import sortable from 'sortablejs';

export default {
  props: {
    handle: { // 拖动元素
      type: String,
      default: ''
    },
    data: { // 列表数据
      type: Array,
      default: () => ([])
    },
  },
  mounted() {
    this.initTableSortable();
  },
  methods: {
    initTableSortable() {
      const table = this.$children[0].$el.querySelector('.el-table__body-wrapper table tbody');
      sortable.create(table, {
        ghostClass: 'sortable-ghost',
        handle: this.handle,
        onStart: () => {
          this.$emit('drag');
        },
        onEnd: ({ newIndex, oldIndex }) => {
          const list = [...this.data];
          const targetRow = list.splice(oldIndex, 1)[0];
          list.splice(newIndex, 0, targetRow);
          this.$emit('drop', { targetRow, list });
        }
      });
    },
  }
};
</script>