需求: 对表格数据进行批量处理的时候,即使有复选框但是也得需要一个一个选。有点麻烦。
解决: 点击一行之后摁住shift,再选择另一个,两条数据之间的则为选中
<template><el-table :data="tableData" @row-click="handleRowClick"><!-- 省略表格列的定义 --></el-table>
</template>
<script>
export default {data() {return {tableData: [], // 表格数据lastSelectedRow: null, // 上一次选中的行selectedRow: null // 当前选中的行}},methods: {handleRowClick(row,column, event) {this.lastSelectedRow = this.selectedRow // 记录上一次选中的行this.selectedRow = selection[0] // 记录当前选中的行if (this.lastSelectedRow && event.shiftKey) {// Shift 键按下,选中中间的行const startIndex = this.tableData.indexOf(this.lastSelectedRow)const endIndex = this.tableData.indexOf(row)const [start, end] = startIndex < endIndex ? [startIndex, endIndex] : [endIndex, startIndex]for (let i = start + 1; i < end; i++) {this.$refs.table.toggleRowSelection(this.tableData[i], true)}} else {// Shift 键未按下,正常选中/取消选中一行this.$refs.table.toggleRowSelection(row)}}}
}
</script>
这个还有一个问题。就是页面上的文字则会被选中。 这个可以用css更改
.no-select {-webkit-user-select: none; /* Safari */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* IE10+/Edge */user-select: none; /* 标准语法 */
}