单击行自动选中与取消 与 单独点击复选框选中与取消 的联动用法

最新推荐文章于 2023-11-06 10:48:17 发布
最新推荐文章于 2023-11-06 10:48:17 发布
阅读量716 收藏 1
点赞数
分类专栏： Element UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zbb18314/article/details/92823196
版权 
<el-table :data="grid1ds" border class="mb10" ref="grid1ds" @row-click = "getRowInfo" @selection-change="checkChange">
    methods: {
      // 复选框状态改变执行
    checkChange(val){
      this.selectedRow = val;
    },
    // 获取选中表格数据
    getRowInfo(row) {
      this.$refs.grid1ds.toggleRowSelection(row);
    },
    },
枫凌飞絮
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现带复选框的表格行选中删除时高亮显示
12-12
如果已选中，我们就移除该类并取消复选框的选中状态；反之，我们添加`.selected`类并选中复选框。这部分代码如下： ```javascript $(document).ready(function() { $("#tablight tr:gt(0)").click(function() { ...
jquery 实现鼠标单击行时，选中checkbox复选框
05-18
jquery 实现鼠标单击行时，改变行的背景颜色，选中checkbox复选框
VUE学习（三）-VUE集成elementui
b422761838的专栏
11-22 454
1.安装element-ui cnpm i element-ui -S 2.修改main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router fro
checkbox全选、取消全选以及子checkbox联动
by_lucky_seven的博客
04-01 259
HTML部分代码 <input type="checkbox" name="selectAll"> <input type="checkbox" name="rmReq" value="1"> <input type="checkbox" name="rmReq" value="2"> <input type="checkbox" name="rmRe...
table的多选行点击和取消事件，复选框选中和取消事件，利用this.$refs.table.selection以及状态变化事件和行点击事件触发，代码简洁，简单
最新发布
weixin_42024333的博客
11-06 1960
【代码】table的多选行点击和取消事件，复选框选中和取消事件，利用this.$refs.table.selection以及状态变化事件和行点击事件触发，代码简洁，简单。
checkbox全选中与全不选中
04-15 225
<script src="/js/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //点击全勾选复选框 //$(function(){ $("#checkall").click(function () { //全选中 if (this.checked) {...
checkbox 设置为选中和未选中状态
LzwGlory的专栏
04-11 2万+
$("#checkAll").prop("checked",false);//重新请求数据的时候把全选框变为未选中
jquery判断checkbox(复选框)是否被选中的代码
01-19
代码如下: //是否被选中验证有选中的return true,否return false function mycheckbox() { var falg = 0; $(“input[name=’soft[]’]:checkbox”).each(function () { if ($(this).attr(“checked”)) { falg += 1;...
三种取消选中单选框radio的方法
09-04
本文将详细讨论三种取消选中单选框radio的方法，这些方法包括使用jQuery来实现的两种方式，以及基于JavaScript和DOM实现的第三种方式。 首先，需要了解的是，单选框的选中状态是由其checked属性决定的，该属性为...
checkbox选不选中问题
chiyingliao3565的博客
08-27 168
<scripttype="text/javascript"> $(function(){ //checkboxAll全选事件 $("#checkboxAll").bind("c...
让checkbox不选中即将选中的checkbox不选中
09-04
把选中的checkbox置空，即将选中的checkbox不选中，实现的方法很多，下面为大家分享个不错可行，已测试的好方法，希望对大家有所帮助
checkbox选中和不选中 jqu_快速选中文本的技巧，你值得掌握
weixin_34677764的博客
12-13 350
1、拖动鼠标选中文本拖动鼠标选中文本这种方式是最基本的，应该是所有人都会的。人们只需要拖动鼠标就能选中文本。2、选择一行如果你是想只选中一行文字，但是又不想拖动鼠标去选择，那么你可以选择这样一种简单的方法，就是把鼠标移动到你要选中的一行的左侧，当鼠标的箭头指向右边时，单击鼠标左键，就可以选中一行了。3、选中一个段落如果你是想只选中一个段落文字，但是又不想拖动鼠标去选择，那么你可以选择这样一种简单的...
复选框checkbox全选与全不选
demo_gsl的博客
06-29 3043
1.html复选框标签代码如下：&lt;input type="checkbox" id="checkboxall" value="1" onclick="check();"&gt;&lt;br&gt;&lt;input type="checkbox" id="inlineCheckbox" name="box" &gt;
jq跳转到指定页面_【intent】跳转QQ群成员列表
weixin_39966163的博客
11-24 584
我在之前写过跳转app指定页面的文章——获取快手主页跳转url scheme 协议的方法(app通用方法)，这个文章中讲的是获取scheme url，然后利用它跳转，这种方法有一定的局限性，就是只能获取app支持分享的页面，如果页面不具备分享功能，那么就没法获取了。比如前几天群友问我的怎么跳转QQ群成员列表，这个就是一个没有分享功能的页面。我们想直接跳转的页面就需要另外一种方法，inte...
checkbox 选中和不选中的值分别设置
weixin_46362547的博客
07-07 1万+
轻松解决选中和未选中checkbox的value一样的问题 <input type="checkbox" value="uncheck" name="check" onclick="this.value=(this.value=='uncheck')?'checked':'uncheck'">
复选框check的选中、不选中设置以及判断是否选中
Garnett_zk的博客
07-10 7847
复选框的设置一、JavaScript判断是否选中checkbox框二、JavaScript设置选中checkbox框三、JavaScript移除选中checkbox框四、使用jQuery判断是否选中checkbox框五、使用jQuery设置选中checkbox框六、使用jQuery设置移除选中checkbox框 一、JavaScript判断是否选中checkbox框 <input type=...
element 列表选中取消选中
hfyldx的博客
07-29 628
【代码】element 列表选中取消选中。
如何在word插入一个可以勾选和取消的方框
热门推荐
qq_27445049的博客
02-22 4万+
点击文件 点击选项 选择“自定义功能区” 把右面的“开发工具”打钩，点击“确定” 打开“开发工具”，点击下面带对号的方框，如图。则可以看到已经输入了可以取消和勾选的方框，但是勾选后是☒，而不是我们要的R。 选中方框，点击上面的属性 点击图中画出来的“更改”按钮 选择“wingdings 2”，在下面找到R，并选择；点击确定。 点击“确定” 则选...
ElementUi 表格双击可编辑
我是一个酒鬼的博客
05-11 9715
ElementUi 表格双击可编辑，精确定位某一个单元格
el-table 如何实现单击行选中复选框
05-22
要在 `el-table` 中单击行时选中复选框，可以使用 `el-table` 提供的 `row-click` 事件和 `table-column` 组件中的 `type` 属性。 首先，在 `el-table` 中添加 `row-click` 事件监听器，并将 `selection` 属性绑定到当前行的数据项： ```html <el-table :data="tableData" @row-click="handleRowClick" :row-key="row => row.id" :selection="multipleSelection"> ``` 在 `handleRowClick` 方法中，判断当前行是否已选中，如果已选中，则取消选中；否则，选中当前行： ```js methods: { handleRowClick(row) { const index = this.multipleSelection.indexOf(row); if (index > -1) { this.multipleSelection.splice(index, 1); } else { this.multipleSelection.push(row); } } } ``` 然后，在 `table-column` 组件中设置 `type` 属性为 `selection`，以显示复选框列： ```html <el-table-column type="selection" width="55"></el-table-column> ``` 最后，定义 `multipleSelection` 数据项，并将其初始化为空数组： ```js data() { return { tableData: [...], multipleSelection: [] } } ``` 完成上述步骤后，单击 `el-table` 中的行时，应该能够选中或取消选中行对应的复选框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值