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

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

先看效果：

安装Sortablejs

npm install sortablejs --save

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>