elementUI,el-table按住shift选中从上次选中的行到这次点击的行之间的所有行

<template>

    <div>

        <el-table ref="multipleTable" :data="tableData" style="width: 100%" @select="selectRow">

            <el-table-column type="selection" width="55">

            </el-table-column>

            <el-table-column label="日期" width="120">

                <template slot-scope="scope">{{ scope.row.date }}</template>

            </el-table-column>

            <el-table-column prop="name" label="姓名" width="120">

            </el-table-column>

            <el-table-column prop="address" label="地址" show-overflow-tooltip>

            </el-table-column>

        </el-table>

    </div>

</template>

<script>

export default {

    data() {

        return {

            tableData: [{

                date: '2016-05-03',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1518 弄'

            }, {

                date: '2016-05-02',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1518 弄'

            }, {

                date: '2016-05-04',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1518 弄'

            }, {

                date: '2016-05-01',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1518 弄'

            }, {

                date: '2016-05-08',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1518 弄'

            }],

            lastSelectedIndex: -1,

            shiftPressed: false,

            selectedRows: [],

        };

    },

    watch: {},

    created() { },

    mounted() {

        // 监听键盘事件

        window.addEventListener('keydown', this.handleKeyDown);

        window.addEventListener('keyup', this.handleKeyUp);

    },

    beforeDestroy() {

        // 移除事件监听

        window.removeEventListener('keydown', this.handleKeyDown);

        window.removeEventListener('keyup', this.handleKeyUp);

    },

    methods: {

        // 键盘shift按下事件

        handleKeyDown(event) {

            if (event.key === 'Shift') {

                this.shiftPressed = true;

            }

        },

        // 键盘shift抬起事件

        handleKeyUp(event) {

            if (event.key === 'Shift') {

                this.shiftPressed = false;

            }

        },

        selectRow(selection, row) {

            const rowIndex = this.tableData.indexOf(row);

            if (this.shiftPressed && this.lastSelectedIndex !== -1) {

                const start = Math.min(this.lastSelectedIndex, rowIndex);

                const end = Math.max(this.lastSelectedIndex, rowIndex);

                // 清空当前选中，重新选择范围内的行

                this.$refs.multipleTable.clearSelection();

                for (let i = start; i <= end; i++) {

                    this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true);

                }

            } else {

                // 如果不是按住 Shift 键，则更新最后选中的行索引

                this.lastSelectedIndex = rowIndex;

            }

        },

    },

};

</script>

<style lang='scss' scoped></style>