我需要一段按住shift配合el-table实现多选的代码
时间: 2024-02-09 12:12:38 浏览: 208
你可以参考以下代码实现按住shift键多选el-table中的数据:
```html
<template>
<el-table :data="tableData" @row-click="handleRowClick($event)">
<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: [
{ name: '小明', age: 18 },
{ name: '小红', age: 20 },
{ name: '小刚', age: 22 },
{ name: '小李', age: 25 },
{ name: '小张', age: 28 },
],
lastSelectedIndex: -1,
selectedRows: [],
};
},
methods: {
handleRowClick(row, event) {
if (event.shiftKey && this.lastSelectedIndex !== -1) {
const rows = this.tableData;
const currentIndex = rows.indexOf(row);
const lastIndex = rows.indexOf(this.tableData[this.lastSelectedIndex]);
const start = Math.min(currentIndex, lastIndex);
const end = Math.max(currentIndex, lastIndex);
this.selectedRows = rows.slice(start, end + 1);
} else {
this.selectedRows = [row];
this.lastSelectedIndex = this.tableData.indexOf(row);
}
},
},
};
</script>
```
在上面的代码中,我们通过 `@row-click` 监听鼠标点击事件,并在事件处理函数中判断是否按住了 `shift` 键。如果按下了 `shift` 键,则选中从上次选中的行到当前行之间的所有行;如果没有按下 `shift` 键,则只选中当前行。
选中的行数据保存在 `selectedRows` 数组中,可以在需要的地方进行使用。
阅读全文