如何封装一个支持sortable.js选项的el-table拖拽组件？

前端

2024-01-20 04:31:56

el-table的可排序拖拽表元素的创建与开发

引言

拖拽排序是表格交互中非常有用的功能，可以使用户轻松地调整表格中行的顺序。目前，有许多JavaScript库可以实现拖拽排序的功能。

在这篇文章中，我们将介绍如何使用sortable.js 库来实现el-table 的拖拽排序功能。

sortable.js 是一个轻量级、高性能的拖拽排序库，它可以轻松地实现表格、列表和其它元素的拖拽排序功能。sortable.js 库的使用非常简单，只需在需要实现拖拽排序的元素上添加sortable类名，即可。

实现步骤

1. 安装sortable.js 库

npm install sortablejs --save

2. 在你的项目中引入sortable.js 库

import Sortable from 'sortablejs';

3. 将sortable.js 库应用到el-table 上

<el-table ref="table" :data="tableData" @row-drag-end="onRowDragEnd">
  <el-table-column type="selection" width="55">
    <template slot-scope="scope">
      <el-checkbox v-model="scope.row.selected"></el-checkbox>
    </template>
  </el-table-column>
  <el-table-column prop="name" label="名称">
  </el-table-column>
  <el-table-column prop="age" label="年龄">
  </el-table-column>
  <el-table-column prop="address" label="地址">
  </el-table-column>
</el-table>

4. 在Vue 组件的`mounted`钩子中，初始化sortable.js 库

mounted() {
  this.sortable = new Sortable(this.$refs.table, {
    // 拖拽结束后触发的回调函数
    onEnd: (evt) => {
      // 获取拖拽后的行数据
      const row = this.tableData[evt.oldIndex];
      // 将拖拽后的行数据插入到新的位置
      this.tableData.splice(evt.newIndex, 0, row);
      // 删除拖拽前的行数据
      this.tableData.splice(evt.oldIndex, 1);
    }
  });
}