表格拖拽

之前在项目中写过表格拖拽相关的东西,但是当时只是在网上找到方法然后用到项目中,并没有多少记忆,现在回过头来记录一下
项目使用vue+element
首先需要安装sortablejs
sortable.js中文文档
npm 安装命令如下:

npm install sortablejs --save

完整代码如下:

<template>
  <el-table :data="tableData" id="rowDrop_table" row-key="id">
    <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>

<script>
import Sortable from "sortablejs";
export default {
  name: "App",
  data() {
    return {
      tableData: [
        { id: "001", date: "2016-05-01", name: "赵", address: "上海市普陀区金沙江路 1518"},
        { id: "002", date: "2017-06-02", name: "钱钱钱", address: "上海市普陀区金沙江路 1517"},
        { id: "003", date: "2018-07-03", name: "孙孙孙孙孙孙", address: "上海市普陀区金沙江路 1519"},
        { id: "004", date: "2019-08-04", name: "李李李李李李李李李", address: "上海市普陀区金沙江路 1516"}
      ]
    };
  },
  methods: {
    rowDrop() {
      let tbody = document.querySelectorAll("#rowDrop_table tbody");
      if (!tbody.length) return;
      Sortable.create(tbody[0], {
        onEnd({ newIndex, oldIndex }) {
          const currRow = this.tableData.splice(oldIndex, 1)[0];
          this.tableData.splice(newIndex, 0, currRow);
        }
      });
    }
  },
  mounted() {
    this.rowDrop();
  }
};
</script>
<style>
#rowDrop_table {
  width: 700px;
  margin: 0 auto;
}
</style>

注意:表格必须添加row-key行数据的 Key，用来优化 Table 的渲染,否则表格拖拽的时候会有问题