一招帮你实现Element-Table行拖动排序，无需下载Sortable.js

2023-12-27 04:11:04

Element-UI作为Vue.js生态系统中的一款优质UI组件库，其表格组件Element-Table因其丰富的功能和简洁的语法而广受欢迎。然而，默认情况下，Element-Table并不支持拖拽排序功能。本文将介绍一种无需第三方依赖的简洁方法，帮助你轻松实现Element-Table的行拖拽排序功能。

原理解析

虽然Element-Table没有提供直接的拖拽排序API，但它允许我们通过自定义行的类名来灵活控制行元素的样式和行为。利用这一特性，我们可以在行元素上设置draggable属性，并注册拖拽事件。在拖拽过程中，通过修改数据源中的索引来实现行位置的移动。

详细步骤

1. 安装依赖

首先，在你的项目中安装Element-UI：

npm install element-ui

2. 引入Element-Table组件

在你的Vue组件中导入Element-Table组件：

import { ElTable, ElTableColumn } from 'element-ui';

Vue.use(ElTable);
Vue.use(ElTableColumn);

3. 设置自定义行类名

使用row-class-name属性为Element-Table设置自定义行类名：

<el-table :data="tableData" row-class-name="rowClass">
  ...
</el-table>

4. 初始化拖拽

在组件的mounted()钩子函数和tableData更新时调用$nextTick()获取DOM元素，并设置拖拽相关属性和事件监听器：

mounted() {
  this.$nextTick(() => {
    this.initDrag();
  });
},
watch: {
  tableData: {
    handler() {
      this.$nextTick(() => {
        this.initDrag();
      });
    },
    deep: true,
  },
}

5. 设置拖拽属性和事件监听器

在initDrag()方法中，为行元素设置draggable属性并注册拖拽事件监听器：

initDrag() {
  const rows = document.querySelectorAll('.rowClass');

  rows.forEach((row) => {
    row.setAttribute('draggable', true);

    row.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('row-index', e.target.rowIndex);
    });

    row.addEventListener('dragover', (e) => {
      e.preventDefault();
    });

    row.addEventListener('drop', (e) => {
      e.preventDefault();

      const rowIndex = e.dataTransfer.getData('row-index');
      const targetRowIndex = e.target.rowIndex;

      this.moveRow(rowIndex, targetRowIndex);
    });
  });
}

6. 修改数据实现行位置移动

在moveRow()方法中，通过修改tableData数据对象的index，实现行位置的移动：

moveRow(rowIndex, targetRowIndex) {
  const data = this.tableData;
  const row = data.splice(rowIndex, 1)[0];
  data.splice(targetRowIndex, 0, row);

  this.$forceUpdate();
}