如何在 el-table 中实现拖拽排序?
时间: 2024-06-16 11:05:25 浏览: 16
在el-table中实现拖拽排序,可以通过以下步骤来实现:
1. 首先,确保你已经引入了element-ui库,并正确使用了el-table组件。
2. 在el-table中,给需要排序的列添加一个自定义的拖拽排序指令。可以使用vuedraggable或其他类似的拖拽库来实现。
3. 在自定义指令中,监听拖拽事件,获取拖拽的起始位置和目标位置。
4. 根据起始位置和目标位置,更新数据源中对应的数据项的顺序。
5. 在el-table中使用v-for指令遍历数据源,确保数据项的顺序与数据源一致。
下面是一个简单的示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column label="姓名" prop="name">
<template slot-scope="scope">
<div v-drag-sort class="drag-handle">{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 },
],
};
},
directives: {
dragSort: {
bind(el, binding, vnode) {
const dragHandle = el.querySelector('.drag-handle');
dragHandle.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', vnode.key);
});
el.addEventListener('dragover', (event) => {
event.preventDefault();
});
el.addEventListener('drop', (event) => {
event.preventDefault();
const sourceKey = event.dataTransfer.getData('text/plain');
const targetKey = vnode.key;
const sourceIndex = vnode.context.tableData.findIndex((item) => item.name === sourceKey);
const targetIndex = vnode.context.tableData.findIndex((item) => item.name === targetKey);
if (sourceIndex > -1 && targetIndex > -1) {
const [removed] = vnode.context.tableData.splice(sourceIndex, 1);
vnode.context.tableData.splice(targetIndex, 0, removed);
}
});
},
},
},
};
</script>
```
这样,你就可以在el-table中实现拖拽排序了。