你可以使用 Element UI 的 `<el-
table>`
组件结合拖拽库，实现一个可以上下拖拽的表格
组件。以下是一个示例代码：
```vue
<template>
<div>
<el-
table
:data="
tableData"
:row-key="getRowKey"
ref="drag
Table"
:row-class-name="getRowClassName"
>
<el-
table-column label="
序号" width="100">
<template slot-scope="{ row, $index }">
<span>{{ $index + 1 }}</span>
</template>
</el-
table-column>
<el-
table-column label="姓名">
<template slot-scope="{ row }">
<span>{{ row.name }}</span>
</template>
</el-
table-column>
<el-
table-column label="年龄">
<template slot-scope="{ row }">
<span>{{ row.age }}</span>
</template>
</el-
table-column>
</el-
table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 },
{ name: '赵六', age: 35 },
],
};
},
methods: {
getRowKey(row) {
return row.name; // 根据实际情况返回唯一的键值
},
getRowClassName(row, index) {
return `row-${index}`;
},
handleDragEnd(event) {
const { newIndex, oldIndex } = event;
const draggedRow = this.
tableData.splice(oldIndex, 1)[0];
this.
tableData.splice(newIndex, 0, draggedRow);
// 后续可以在此处将新的顺序保存到数据库或进行其他操作
},
},
mounted() {
const drag
Table = this.$refs.drag
Table.$el.querySelector('.el-
table__body-wrapper');
const sor
table = new Sor
table(drag
Table, {
animation: 150,
handle: '.el-
table__row',
ghostClass: 'dragging',
});
sor
table.on('end', this.handleDragEnd);
},
};
</script>
<style scoped>
.dragging {
opacity: 0.5;
}
</style>
```
在上面的示例中，我们使用了 `<el-
table>`
组件来展示表格数据，通过设置 `:row-key` 属性来指定行的唯一键值。然后，我们使用了一个自定义的样式类名 `row-${index}` 来为每一行添加样式，以便在拖拽时添加视觉效果。我们还使用了 Sor
table.js 库来实现拖拽功能，并监听了拖拽结束的事件来更新表格数据的顺序。
注意：在使用此示例代码之前，请确保已安装 Sor
table.js 库，并在 Vue
组件中进行引入。
希望对你有所帮助！
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
