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都可以嘛，氣氣。哈哈