Vuejs用sortablejs实现表格之间上下拖拽功能

功能需求：表格需要做排序，拖动需要排序行放在想要的位置。下面需要用到sortablejs插件，下面代码可以直接复制使用！

1、template代码

<el-table :data="list" ref="dragTable" highlight-current-row row-key="id">
  <el-table-column label="id" width="60" prop="id"></el-table-column>
  <el-table-column label="name" prop="name"></el-table-column>
  <el-table-column label="school" prop="school"></el-table-column>
  <el-table-column label="age" prop="age"></el-table-column>
  <el-table-column label="sex" prop="sex"></el-table-column>
</el-table>

2、js代码

import Sortable from "sortablejs";
export default {
  data() {
    return {
      list: [
        { id: 1, name: "张富贵", school: "西瓜南大学", age: "22", sex: "不知" },
        { id: 2, name: "李德华", school: "西瓜南大学", age: "22", sex: "不知" },
        { id: 3, name: "董小明", school: "西瓜南大学", age: "22", sex: "不知" }
      ],
      oldId: "",
      newsId: ""
    };
  },
  mounted() {
    this.setSort();
  },
  methods: {
    setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      this.sortable = Sortable.create(el, {
        ghostClass: "sortable-ghost",
        setData: function(dataTransfer) {
          dataTransfer.setData("Text", "");
        },
        onEnd: evt => {
          const targetRow = this.list.splice(evt.oldIndex, 1)[0];
          this.list.splice(evt.newIndex, 0, targetRow);
          console.log("Id", targetRow.id);
          console.log("位置", evt.newIndex);
        }
      });
    }
  }
};

原生js如何判断图片是否存在

vuejs简单介绍vue安装和卸载方法

el-table实现拖拽行排序sortablejs

php如何去除数组中的最小值、最大值

php如何实现升序排序和降序排序

标签： queryselectorAll, sort, sortablejs, vuejs, 拖拽功能

上面是“Vuejs用sortablejs实现表格之间上下拖拽功能”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2184.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！