el-table 拖动一个选中的行,所有选中的行被选中并排序
时间: 2024-03-05 22:50:50 浏览: 63
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
您好,针对您的问题,我理解的意思是您想实现el-table表格拖动一个选中的行,所有选中的行都被选中并排序的功能。
首先,您需要在el-table组件中开启多选模式,即设置属性`@selection-change`和`@select-all`,然后在拖动事件中获取到选中的行数据,进行排序并更新表格数据即可实现该功能。
具体代码可以参考下面的示例:
```html
<template>
<el-table
ref="table"
:data="tableData"
:row-key="row => row.id"
:selection="selection"
@selection-change="handleSelectionChange"
@select-all="handleSelectAll">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 25 },
{ id: 2, name: '李四', age: 30 },
{ id: 3, name: '王五', age: 28 },
{ id: 4, name: '赵六', age: 32 }
],
selection: []
}
},
methods: {
handleSelectionChange(selection) {
this.selection = selection
},
handleSelectAll(selection) {
this.selection = selection
},
handleDragDrop(event) {
const { selection } = this
if (selection.length <= 1) return
const { newIndex, oldIndex } = event
const [movedRow] = selection.splice(oldIndex, 1)
selection.splice(newIndex, 0, movedRow)
this.tableData = [...this.tableData]
}
}
}
</script>
```
在上面的示例中,我们通过`@selection-change`和`@select-all`监听表格的选中状态,并将选中的行数据保存在`selection`数组中。当拖动事件触发时,我们获取到选中的行数据,进行排序并更新表格数据。注意,我们使用了`...`拓展运算符来创建一个新的数组,以触发表格的重新渲染。
希望能对您有所帮助。
阅读全文