elementui实现拖拽排序_element表格列拖拽

在现代Web应用中，用户界面的交互性和灵活性越来越受到重视。Element UI 是一个基于 Vue.js 的桌面端组件库，提供了丰富的组件和便捷的使用方法。本文将介绍如何使用 Element UI 实现表格列的拖拽排序功能。

解决方案概述

Element UI 本身并没有直接提供表格列拖拽排序的功能，但可以通过结合第三方库如 vuedraggable 来实现这一需求。vuedraggable 是一个基于 Sortable.js 的 Vue 拖拽组件，可以方便地实现列表项的拖拽排序。

使用 vuedraggable 实现拖拽排序

安装依赖

首先，我们需要安装 vuedraggable 和 sortablejs：

bash npm install vuedraggable sortablejs

引入并使用 vuedraggable

接下来，在你的 Vue 组件中引入 vuedraggable 并使用它来实现表格列的拖拽排序。

vue

  
    
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
      >
        
          <span class="handle">{{ column.label }}</span>
        
      
    
  
</p>


import { ref } from 'vue';
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  setup() {
    const tableData = ref([
      { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
      { date: '2016-05-04', name: '张三', address: '上海市普陀区金沙江路 1517 弄' },
      { date: '2016-05-01', name: '李四', address: '上海市普陀区金沙江路 1519 弄' },
    ]);

    const columns = ref([
      { prop: 'date', label: '日期', width: '180' },
      { prop: 'name', label: '姓名', width: '180' },
      { prop: 'address', label: '地址', width: 'auto' },
    ]);

    const onDragEnd = () => {
      console.log('拖拽结束');
    };

    return {
      tableData,
      columns,
      onDragEnd,
    };
  },
};



.handle {
  cursor: move;
}


<p>

代码解释

模板部分：
- 使用 el-table 组件来显示表格数据。
- 使用 draggable 组件包裹 el-table-column，并通过 v-model 绑定列数据 columns。
- handle=".handle" 指定了拖拽手柄，只有带有 .handle 类的元素可以触发拖拽操作。
- @end="onDragEnd" 监听拖拽结束事件。
脚本部分：
- 引入 draggable 组件。
- 定义 tableData 和 columns 数据。
- onDragEnd 方法在拖拽结束时被调用，可以在这里处理拖拽后的逻辑。
样式部分：
- 通过 cursor: move 设置拖拽手柄的鼠标样式。

其他思路

使用原生 Sortable.js

如果你不希望引入额外的 Vue 包，可以直接使用 Sortable.js 来实现拖拽排序。以下是一个简单的示例：

html

  
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
    >
      
        <span class="handle">{{ column.label }}</span>
      
    
  
</p>


import { ref, onMounted } from 'vue';
import Sortable from 'sortablejs';

export default {
  setup() {
    const tableData = ref([
      { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
      { date: '2016-05-04', name: '张三', address: '上海市普陀区金沙江路 1517 弄' },
      { date: '2016-05-01', name: '李四', address: '上海市普陀区金沙江路 1519 弄' },
    ]);

    const columns = ref([
      { prop: 'date', label: '日期', width: '180' },
      { prop: 'name', label: '姓名', width: '180' },
      { prop: 'address', label: '地址', width: 'auto' },
    ]);

    const table = ref(null);

    onMounted(() => {
      new Sortable(table.value.$el.querySelector('.el-table__header-wrapper tr'), {
        animation: 150,
        ghostClass: 'sortable-ghost',
        onEnd: ({ newIndex, oldIndex }) => {
          const movedColumn = columns.value.splice(oldIndex, 1)[0];
          columns.value.splice(newIndex, 0, movedColumn);
        },
      });
    });

    return {
      tableData,
      columns,
      table,
    };
  },
};



.handle {
  cursor: move;
}
.sortable-ghost {
  opacity: 0.5;
  background: #c8ebfb;
}


<p>

代码解释

模板部分：
- 使用 ref="table" 获取表格的引用。
脚本部分：
- 在 onMounted 钩子中初始化 Sortable.js，绑定到表格头部的 tr 元素。
- onEnd 回调函数在拖拽结束时被调用，更新 columns 数组。
样式部分：
- 通过 cursor: move 设置拖拽手柄的鼠标样式。
- sortable-ghost 类用于设置拖拽过程中透明度和背景色。