vue+element+sortableJS拖拽表格

项目代码中安装sortableJs

npm install sortablejs --save-dev

使用

页面代码

强烈建议在el-table组件中加入row-key属性，当拖动页面需要实时保存拖拽顺序时，row-key可以帮助列表页面渲染，如果不加，可能导致页面没有正确渲染。

<template>
  <el-table
    :data="tableData"
    row-key="address"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </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>

JS代码

<script>
  import Sortable from 'sortablejs';
  
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }，
    mounted() {
      this.rowDrop();
    },
    methods: {
     async getTableList() {
        const { data } = await getTableList();
        this.tableData = data || [];
    },
    async sortTable(address, num) {
        await sortTable({ address, num});
    },
    // 拖拽排序
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody');
      const that = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          if (newIndex === oldIndex) return;
          // 这后面的是实时保存拖拽结果，并且获取最新的列表顺序，需要和后端配合
          that.sortTable(that.tableData[oldIndex].address, oldIndex).then(() => {
            that.getTableList();
          });
        },
      });
    },
    }
  }
</script>

强烈建议element加上拖拽，为什么table-tree都可以嘛，气气。哈哈