当前位置：首页 > news >正文

vue + element-ui实现可拖拽表格

news 2025/7/2 10:59:34

1.拖拽表格

在Vue项目中实现拖拽表格功能，可以使用element-ui和sortablejs库。element-ui提供了强大的表格组件，而 sortable.js 则是一个优秀的拖拽库，支持行和列的拖拽。

2.安装依赖

首先，需要安装sortablejs和vuedraggable库：

npm install sortablejs --save
npm install vuedraggable --save

3.实现拖拽功能

以下是一个实现表格行和列拖拽的完整示例代码：

<template><div class="draggable" style="padding: 20px"><ElTable :data="tableData" row-key="id" border style="width: 100%"><ElTableColumn type="index" label="序号" width="100" align="center" /><ElTableColumnv-for="(item, index) in newList":key="`col_${index}`":prop="item.prop":label="item.label"align="center"/></ElTable></div>
</template><script>
import Sortable from 'sortablejs';export default {data() {return {oldList: [],newList: [],tableData: [{ id: 1, name: '李一', gender: '男', age: 30, job: '会计' },{ id: 2, name: '王二', gender: '未知', age: 18, job: '无业游民' },{ id: 3, name: '张三', gender: '男', age: 50, job: '老板' }],tableConfig: {tableItems: [{ label: '姓名', prop: 'name' },{ label: '性别', prop: 'gender' },{ label: '年龄', prop: 'age' },{ label: '工作', prop: 'job' }]}};},mounted() {this.oldList = JSON.parse(JSON.stringify(this.tableConfig.tableItems));this.newList = JSON.parse(JSON.stringify(this.tableConfig.tableItems));this.columnDrop();this.rowDrop();},methods: {columnDrop() {const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr');this.sortable = Sortable.create(wrapperTr, {animation: 180,delay: 0,onEnd: evt => {const oldItem = this.newList[evt.oldIndex];this.newList.splice(evt.oldIndex, 1);this.newList.splice(evt.newIndex, 0, oldItem);}});},rowDrop() {const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody');Sortable.create(tbody, {draggable: '.draggable .el-table__row',onEnd: ({ newIndex, oldIndex }) => {const currRow = this.tableData.splice(oldIndex, 1)[0];this.tableData.splice(newIndex, 0, currRow);}});}}
};
</script><style scoped>
draggable {width: 100%;height: 100%;box-sizing: border-box;padding: 25px;
}
</style>

4.关键点

行拖拽：在el-table标签中，根据行的内容指定行的唯一标识row-key="id"。

列拖拽：定义两个数组，分别存储拖拽前的列顺序和拖拽后的列顺序。

通过上述代码，可以实现表格的行和列拖拽功能，提升用户体验。注意在使用sortablejs时，需要确保表格的row-key唯一，以避免排序错误。