Skip to content

Instantly share code, notes, and snippets.

@blackmiaool

blackmiaool/sortable-table.vue

Last active October 31, 2022 17:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save blackmiaool/ccb74bc87eeeb71c864aeceaf197bdb4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save blackmiaool/ccb74bc87eeeb71c864aeceaf197bdb4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. blackmiaool renamed this gist Jun 27, 2018. 1 changed file with 0 additions and 0 deletions.
    0 sortable-e-table.vue → sortable-table.vue
    View file
    File renamed without changes.
  2. blackmiaool created this gist Jun 27, 2018.
    69 changes: 69 additions & 0 deletions sortable-e-table.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    <template>
    <div ref="wrapper">
    <div :key="tableKey">
    <slot></slot>
    </div>
    </div>
    </template>

    <script>
    /*
    only for el-table
    must be used as:
    <SortableTable>
    <el-table ...>
    ...
    </el-table>
    </SortableTable>
    */
    import sortable from "sortablejs";
    export default {
    name: "SortableTable",
    data() {
    return {
    tableKey: 0
    };
    },
    methods: {
    makeTableSortAble() {
    const table = this.$children[0].$el.querySelector(
    ".el-table__body-wrapper tbody"
    );
    sortable.create(table, {
    handle: ".handle",
    animation: 150,
    onEnd: ({ newIndex, oldIndex }) => {
    this.keepWrapperHeight(true);
    this.tableKey = Math.random();
    const arr = this.$children[0].data;
    const targetRow = arr.splice(oldIndex, 1)[0];
    arr.splice(newIndex, 0, targetRow);
    }
    });
    },
    keepWrapperHeight(keep) {
    const wrapper = this.$refs.wrapper;
    if (keep) {
    wrapper.style.minHeight = `${wrapper.clientHeight}px`;
    } else {
    wrapper.style.minHeight = `auto`;
    }
    }
    },
    mounted() {
    this.makeTableSortAble();
    },
    watch: {
    tableKey() {
    this.$nextTick(() => {
    this.makeTableSortAble();
    this.keepWrapperHeight(false);
    });
    }
    }
    };
    </script>