element-ui-+-sortable.js-实现可拖拽表格

demo

<template>
  <el-table id=;draggable-table; row-key=;id; :data=;tableData;>
    <el-table-column label=;序号; type=;index; width=;50;></el-table-column>
    <el-table-column prop=;name; label=;姓名; width=;180;></el-table-column>
    <el-table-column prop=;address; label=;地址;></el-table-column>
  </el-table>
</template>


<script>
import Sortable from ;sortablejs;

export default {
  name: ;draggable-table;,
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: ;person-1;,
          address: ;address-1;
        },
        {
          id: 2,
          name: ;person-2;,
          address: ;address-1;
        },
        {
          id: 3,
          name: ;person-3;,
          address: ;address-1;
        }
      ]
    }
  },
  mounted() {
    const el = document.querySelector(;#draggable-table tbody;);
    const option = {
      animation: 200,
      onEnd: ({newIndex, oldIndex}) => {
        const currRow = this.tableData.splice(oldIndex, 1)[0]
        this.tableData.splice(newIndex, 0, currRow)
      },
    };
    const sortable = Sortable.create(el, option);
  }
}
</script>

<style scoped>
</style>