通过SortableJS实现elementUItable拖动效果

背景

目前elmenetUI的表格是不支持拖动的,但表格行拖动要求往往比较常见。通过引入sortableJS可以方便的让elementUI组件中的table支持拖动效果。

网上大部分方案如下:

直接操作elementUI的table组件较少,记录一下。

实施方案

  • 引入SortableJS

    npm install sortableJS --save
  • 创建表格组件,需要注意的是,必须设置row-key属性,否则在拖动展示时,会变成乱序

    • template部分

       <el-table row-key="id" :data="tableData" 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>
    • data部分

      data() {
          return {
            tableData: [
              {
                id: "1",
                date: "2016-05-02",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1518 弄"
              },
              {
                id: "2",
                date: "2016-05-04",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1517 弄"
              },
              {
                id: "3",
                date: "2016-05-01",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1519 弄"
              },
              {
                id: "4",
                date: "2016-05-03",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1516 弄"
              }
            ]
          };
        },
  • 配置拖动操作

    • 引入sorable

      import Sortable from "sortablejs";
    • 初始化sorable,并配置拖动事件

      每次拖动的onEnd部分,通过index来splice来截取行,添加行,来更新data。

      mounted() {
          this.rowDrag();
        },
        methods: {
          rowDrag() {
            const tbody = document.querySelector(".el-table__body-wrapper tbody");
            const that = this;
            Sortable.create(tbody, {
              onEnd({ newIndex, oldIndex }) {
                const currentRow = that.tableData.splice(oldIndex, 1)[0];
                that.tableData.splice(newIndex, 0, currentRow);
              }
            });
          }
        }

注意事项

  • 如果没有设置row-key,拖动后会乱序
  • 建议可以设置两个tableData,tableData 和 tableDataCopy。table用于展示,每次拖动后修改tableDataCopy。这样不影响拖动的展示效果,也可以实现拖动的数据处理。再某些特殊表格拖动时,如果修改的是同一个tableDate,可能会出现一些异常。
  • 一个页面如果有多个表格,在拖动方法的时候需要注意,不建议有多个表格。

更多

  • sortableJS的更多配置见官网:http://www.sortablejs.com/opt...
  • 完整代码:

    <template>
      <div>
        <el-card>
          <el-table row-key="id" :data="tableData" 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>
        </el-card>
        <el-card>
          <pre>{{tableData}}</pre>
        </el-card>
      </div>
    </template>
    <script>
    import Sortable from "sortablejs";
    export default {
      data() {
        return {
          tableData: [
            {
              id: "1",
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
              id: "2",
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄"
            },
            {
              id: "3",
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄"
            },
            {
              id: "4",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄"
            }
          ]
        };
      },
      mounted() {
        this.rowDrag();
      },
      methods: {
        rowDrag() {
          const tbody = document.querySelector(".el-table__body-wrapper tbody");
          const that = this;
          Sortable.create(tbody, {
            onEnd({ newIndex, oldIndex }) {
              const currentRow = that.tableData.splice(oldIndex, 1)[0];
              that.tableData.splice(newIndex, 0, currentRow);
            }
          });
        }
      }
    };
    </script>
    <style lang="less" scoped>
    </style>
原文链接:segmentfault.com

上一篇:Extjs7.1的汉化
下一篇:《前端那些事》如何更好管理 Api 接口

相关推荐

  • 如何玩转sortablejs-vuedraggable实现表单嵌套拖拽功能

    最近几天在研究有关vue实现拖拽的功能,不过跟一般的拖拽排序有点不同,这个需求可能出现多行多列嵌套的表单元素,数据也是递归形式的出现。我也是在vuedraggable的基础上扩展实现的,如何想了解更...

    8 个月前
  • sortablejs

    JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQue...

    7 个月前
  • react-sortablejs

    undefined react-sortablejs React component wrapping SortableJS! We're now on version 2.0! A major AP...

    7 个月前
  • Element ui表格组件+sortablejs实现行拖拽排序

    前言 运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便 效果 实现方式 template部分 &lt;el-table v...

    1 年前
  • @types/sortablejs

    TypeScript definitions for Sortable.js Installation npm install --save @types/sortablejs Summary T...

    5 个月前

官方社区

扫码加入 JavaScript 社区