vue elementUI实现el-table点击行单选, 点击行多选,点击复选框单选效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue elementUI实现el-table点击行单选, 点击行多选,点击复选框单选效果相关的知识,希望对你有一定的参考价值。

参考技术A 以下分别介绍这四种效果的实现方式,非常简单!

首先:table绑定点击行事件 @row-click="rowClick"
绑定复选框勾选事件 @select="handleSelectionChange"

1、点击行多选

2、点击行单选

3、table复选框单选 点击复选框单选效果 记录选中数据

4、table复选框多选 点击复选框多选效果 记录选中数据

如果还涉及到复选框默认勾选,默认禁用等效果。
可查看我的上篇笔记~

以上是关于vue elementUI实现el-table点击行单选, 点击行多选,点击复选框单选效果的主要内容,如果未能解决你的问题,请参考以下文章

在vue中使用elementUI饿了么框架使用el-tabs,切换Tab如何实现实时加载,以及el-table表格使用总结

vue elementUI实现el-table 复选框默认选中,默认禁用,默认选中且禁用等效果

vue+ElementUI——表格分页(前端实现方法)

vue+elementui 中el-table导出为Excel

elementUI实现el-table分页多选功能,解决点击分页之后还可以选中

elementUI+vue-cli el-table=》excel