Element UI 表格点击选中行/取消选中快捷多选以及快捷连续多选，高亮选中行

最新推荐文章于 2024-07-23 14:53:44 发布

lozvoe

最新推荐文章于 2024-07-23 14:53:44 发布

阅读量1w

点赞数 5

分类专栏： Vue 文章标签： Element ui Vue table 选择多选

本文链接：https://blog.csdn.net/qq_38396215/article/details/100075259

版权

Element UI 表格点击选中行/取消选中快捷多选以及快捷连续多选，高亮选中行

- - Demo及代码

ElementUI table自带的有一个 highlight-current-row的属性，但是只能单选。所以要实现点击行选中以及多选得自己实现.
目标：单击选中/取消，按 ctrl键点击实现多选，按 shift/alt键实现连续多选。

实现效果

1. 监听`row-click`事件，实现选中

 <el-table ref="multipleTable" 
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @row-click="rowClick" 
            :row-style="rowStyle"
            :row-class-name="rowClassName">
            .....
            .....
</el-table>