el-table实现拖拽行

目标

想在el-table实现拖拽行

效果

参考

www.sortablejs.com/options.htm…

实现

• 1引入sortable.js的包: npm install sortable.js --save
• 2.实例

<template>
  <div class="hello">
    <el-table :data="tableData"
     ref="sortTable"
              border
              row-key="id">
      <el-table-column prop="yidong"
                       class-name="allowDrag"
                       label="移动"
                       width="180">
        <template slot-scope="scope">
          <i class="el-icon-share"></i>

        </template>

      </el-table-column>
      <el-table-column v-for="(item, index) in col"
                       :key="item.prop"
                       :prop="item.prop"
                       :label="item.label">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
  name: "drag",
  data() {
    return {
      col: [
        { label: "日期", prop: "date" },
        { label: "姓名", prop: "name" },
        { label: "地址", prop: "address" },
      ],
      tableData: [
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 100 弄",
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 200 弄",
        },
        {
          id: "3",
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 300 弄",
        },
        {
          id: "4",
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 400 弄",
        },
      ],
    };
  },
  mounted() {
    this.rowDrop();
  },
  methods: {
    // 行拖拽
    rowDrop() {
      // 此时找到的元素是要拖拽元素的父容器
           const tbody = this.$refs.sortTable.$el.querySelector(
        '.el-table__body > tbody'
      )
      Sortable.create(tbody, {
        handle: ".allowDrag",
        //  指定父元素下可被拖拽的子元素
        draggable: ".el-table__row",
        onEnd: ({ newIndex, oldIndex }) => {
          const currRow = this.tableData.splice(oldIndex, 1)[0];
          this.tableData.splice(newIndex, 0, currRow);
        },
      });
    },
  },
};
</script>