el-table(Sortable)简单实现拖动排序(亲测有效)

1、template组件，这里需要注意2点，ref="dragTable"和row-key="id"

<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>
</template>

2、script可以之间复制使用

import Sortable from "sortablejs";
export default {
  data() {
    return {
      list: [
        { id: 1, name: "张富贵", school: "西瓜南大学", age: "22", sex: "不知", sort:1 },
        { id: 2, name: "李德华", school: "西瓜南大学", age: "22", sex: "不知", sort:2 },
        { id: 3, name: "董小明", school: "西瓜南大学", age: "22", sex: "不知", sort:3 }
      ],
      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("原来位置", targetRow.sort);
          console.log("现在位置", evt.newIndex + 1); //这是当前页面位置，如果是分页需要自己改一下
        }
      });
    }
  }
};

el-table合并行的通用方法（附js代码）

el-table利用:row-style="rowClass"设置指定行变色

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

el-table表格显示selection多选时对某些复选框设置禁止选中

el-table表格实现多选功能（全选/指定选中/取消选中）

标签： el-table, queryselectorAll, sort, 排序

上面是“el-table(Sortable)简单实现拖动排序(亲测有效)”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

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

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