el-table实现拖拽行排序sortablejs

el-table如何做一个拖拽行排序效果，下面web建站小编给大家详细介绍一下具体实现代码！

安装脚手架

npm install sortablejs --save

el-table基本代码

<template>
  <el-table
    :data="tableData"
    border
    row-key="date"
    style="width: 100%"
  >
    <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>

引入sortablejs组件实现拖拽功能

import Sortable from "sortablejs";

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
    };
  },
  mounted() {
    const tbody = document.querySelector(".draggable-table .el-table__body-wrapper tbody");
    new Sortable(tbody, {
      animation: 150,
      // 需要在odEnd方法中处理原始eltable数据，使原始数据与显示数据保持顺序一致
      onEnd: ({ newIndex, oldIndex }) => {
        const targetRow = this.tableData[oldIndex];
        this.tableData.splice(oldIndex, 1);
        this.tableData.splice(newIndex, 0, targetRow);
        console.table(this.tableData);
      },
    });
  },
};

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

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

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

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

el-dialog中获取el-table组件的ref值报undefined错误！

标签： el-table, sortablejs, 拖拽排序

上面是“el-table实现拖拽行排序sortablejs”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

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

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