vue 表格行列拖拽

要求是既能行拖拽,又能列拖拽
其实自己实现起来特别简单,没必要在一些UI插件上二次开发.

1.vue2的例子

安装sortablejs

npm install sortablejs --save

如果想拖拽列,就在列的上一级元素tr给个id,传入sortablejs实例就行.

如果想拖拽行,就在行的上一级元素tbody绑定个id,传入sortablejs实例

具体代码如下

<template>
  <div>
    demo
    <table class="table table-striped">
      <thead class="thead-dark">
        <tr class="sort-target" id="tuo_1">
          <th class="cursor-move" v-for="header in columns" :key="header.key">
            {{ header.title }}
          </th>
        </tr>
      </thead>
      <tbody id="neirong_1">
        <tr v-for="(item, index) in list" :key="index">
          <td v-for="header in columns" :key="header.key">
            {{ item[header.dataIndex] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      columns: [
        {
          title: "年龄",
          dataIndex: "age",
          key: "age"
        },
        {
          title: "班级",
          dataIndex: "banji",
          key: "banji"
        },
        {
          title: "成绩",
          dataIndex: "chengji",
          key: "chengji"
        }
      ],
      list: [
        {
          age: 17,
          banji: "a1-17",
          chengji: 57
        },
        {
          age: 18,
          banji: "a2-18",
          chengji: 58
        },
        {
          age: 19,
          banji: "a3-19",
          chengji: 59
        },
        {
          age: 20,
          banji: "a4-20",
          chengji: 60
        }
      ]
    };
  },
  mounted(){
    this.lie_sort()

    this.hang_sort()
  },
  methods: {
    lie_sort() {
      let el = document.getElementById("tuo_1");
      Sortable.create(el, {
        animation: 300,
        onEnd: evt => {
          // 获取拖动前和拖动后的行索引——可以直接在这里拿到对应的列和排序后的位置进行保存
          const oldIndex = evt.oldIndex;
          const newIndex = evt.newIndex;

          console.log(oldIndex,newIndex)

          // 根据行索引交换数据
          if (oldIndex !== newIndex) {
            this.columns.splice(newIndex, 0, this.columns.splice(oldIndex, 1)[0]);
          }
          // 这里后面的数据tableData就是排序后的表格列表了，可以直接进行保存
          console.log("列 切换位置后的数据",  this.columns);
        }
      });
    },

    hang_sort() {
      let el_hang = document.getElementById("neirong_1");
      Sortable.create(el_hang, {
        animation: 300,
        onEnd: evt => {
          // 获取拖动前和拖动后的行索引——可以直接在这里拿到对应的列和排序后的位置进行保存
          const oldIndex = evt.oldIndex;
          const newIndex = evt.newIndex;

          console.log(oldIndex,newIndex)

          // 根据行索引交换数据
          if (oldIndex !== newIndex) {
            this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
          }
          // 这里后面的数据tableData就是排序后的表格列表了，可以直接进行保存
          console.log("行 切换位置后的数据",  this.list);
        }
      });
    },

  }
};
</script>
<style scoped lang="less">
table {
  tr td {
    padding: 10px;
  }
}
</style>