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

以下分别介绍这四种效果的实现方式，非常简单！

首先：table绑定点击行事件 @row-click="rowClick"

绑定复选框勾选事件 @select="handleSelectionChange"

1、点击行多选

2、点击行单选

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

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

如果还涉及到复选框默认勾选，默认禁用等效果。

可查看我的上篇笔记~

$("tr :checkbox:checked")each(function(i,dom){

var tr = $(dom)closest("tr");

consolelog(tr);

});

$("tr :checkbox:not(:checked)")each(function(i,dom){

var tr = $(dom)closest("tr");

var tds = trfind("td");

consolelog(tds);

});

el-table区后台转换返回行数。根据查询相关信息显示：后台返回的数据是按列返回，而el-table渲染的数据是按行进行渲染的，需要将后台的数据进行一下转换，并且把某列的数据一样进行合并。初始值为0，合并行时用每行数据的下标取当前要合并的行数返回给eltable。

以上就是关于vue elementUI实现el-table点击行单选， 点击行多选，点击复选框单选效果全部的内容，包括:vue elementUI实现el-table点击行单选， 点击行多选，点击复选框单选效果、一个table有多行，怎样确定被选中的是第几行，然后遍历未被选中的行，获取其中的某个td、el-table返回行数等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！