el-table 单击某一行,该行的前面的多选框显示已勾选

目   录

        官网:

      1.  单页面

       2. table是组件


案例:

官网:

 

1.  单页面

通过单击获取当前行的数据,然后传给选中显示勾选的方法。

<template><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@row-click="Getrowclick"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column></el-table></template><script>export default {data() {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},],multipleSelection: []}},methods: {/*** 单击事件方法*/Getrowclick(val) {console.log("单击了啊", val);this.$refs.multipleTable.toggleSelection(val);},toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},handleSelectionChange(val) {this.multipleSelection = val;}}}
</script>

2. table是组件

2.1  在table组件中添加方法

 /*** 单击某一行,该行多选框显示已选中*/toggleSelection(rows) {if (rows) {// rows.forEach((row) => {//   this.$refs.table.toggleRowSelection(row);// });this.$refs.table.toggleRowSelection(rows);} else {this.$refs.table.clearSelection();}},

2.2  在主页面调用

 /*** 单击事件*/GetrowClick(val) {console.log("单击了啊", val);this.$refs.cummonTable.toggleSelection(val);},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/61901.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux 下安装chrome 和 go

1. 安装google-chrome 1.1 首先下载google-chrome.deb安装包 之后 安装 gdebi包 sudo apt install gdebi 1.2 安装所要安装的软件 sudo gdebi code_1.81.1-1691620686_amd64.deb 1.3 解决Chrome无法启动问题 rootubuntu:~/Downloads# whereis google-chrome google-chrome…

Windows SQLYog连接不上VMbox Ubuntu2204 的Mysql解决方法

Windows SQLYog连接不上VMbox Ubuntu2204 的Mysql解决方法 解决方法&#xff1a; 1、先检查以下mysql的端口状态 netstat -anp|grep mysql如果显示127.0.0.1:3306 则说明需要修改&#xff0c;若为: : :3306&#xff0c;则不用。 在**/etc/mysql/mysql.conf.d/mysqld.cnf**&am…

java比较器、迭代器和枚举类型详解

文章目录 1. 比较器1.1 Comparable实例&#xff1a;对自定义对象进行排序 1.2 Comparator实例&#xff1a;对自定义对象进行排序 1.3 equals1.3.1 equals介绍1.3.2 详解 2. 迭代器2.1 Iterator2.2 ListIterator 3. 枚举3.1 枚举访问3.1 枚举细节 1. 比较器 比较器指的是集合存…

【H5页面嵌入到小程序或APP中实现手机号点击复制和拨号功能】

在H5界面嵌入到小程序和移动应用&#xff08;安卓和iOS&#xff09;中实现手指点击手机号弹出弹窗&#xff0c;包含呼叫和复制选项&#xff0c;是可以实现的。下面我将为你提供一个基本的示例&#xff0c;并解释在小程序、安卓和iOS中要做的支持工作。 <!DOCTYPE html> …

【玩玩Vue】使用el-menu作为菜单时,通过一二级路由控制菜单高亮

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 文章目录 前言一、Vue路由二、路由一级控制高亮&#xff08;常用&#xff09;1.vue中路由文件2.网址样式3.Vue文件4.$route的内容 三、路由二级控制高亮…

element中Notification组件(this.$notify)自定义样式

1、自定义样式效果 2、vue代码 this.notifications this.$notify({title: ,dangerouslyUseHTMLString: true,duration: obj.remindMethod3 ? 0:4500,customClass: notify-warning,offset: 50,showClose: false,message: this.$createElement("div",null,[this.$…

基于体系结构架构设计-架构真题(十五)

基于体系结构开发设计&#xff08;Architecture-Base Software Design&#xff09;ABSD&#xff0c;是指构成体系结构的&#xff08;&#xff09;组合驱动&#xff0c;ABSC方法是一个自项向下、递归细化的方法&#xff0c;软件系统的体系结构通过该方法细化&#xff0c;直到能产…

手把手教你写出第一个C语言程序

Hello, World! 1. 前言2. 准备知识2.1 环境2.2 文件的分类2.3 注释2.3.1 注释的作用2.3.2 注释的两种风格2.3.2.1 C语言的注释风格2.3.2.2 C的注释风格 2.3.3 VS中注释和取消注释的快捷键 3. 开始演示3.1 创建项目3.2 创建源文件3.3 写代码3.4 编译链接运行 4. 代码解释4.1 写主…

com.google.guava:guava 组件安全漏洞及健康分析

组件简介 维护者google组织许可证类型Apache-2.0首次发布2010 年 4 月 26 日最新发布时间2023 年 8 月 1 日GitHub Star48189GitHub Fork10716依赖包28,694依赖存储库219,576 Guava 是 Google 的一组核心 Java 库&#xff0c;其中包括新的集合类型&#xff08;例如 multimap 和…

vscode 远程连接

这里记录的是修改ssh配置文件的方式远程连接服务器中的docker服务器 假如已经创建好了docker&#xff0c;并已经启动 1. config ssh in dev container 在/etc/ssh/sshd_config中修改 PermitRootLogin in 把 PermitRootLogin prohibit-password 修改为 PermitRootLogin yes …

前端:html实现页面切换、顶部标签栏(可删、可切换,点击左侧超链接出现标签栏)

一、在一个页面&#xff08;不跨页面&#xff09; 效果&#xff1a; 代码 <!DOCTYPE html> <html><head><style>/* 设置标签页外层容器样式 */.tab-container {width: 100%;background-color: #f1f1f1;overflow: hidden;}/* 设置标签页选项卡的样式 …

【C++】C++11新特性 lambda表达式

C11新特性 lambda表达式1、引入2、lambda表达式语法3、 捕获列表说明4、 lambda表达式的原理5、 lambda对象的大小 lambda表达式 1、引入 在C98中&#xff0c;如果想要对一个数据集合中的元素进行排序&#xff0c;可以使用std::sort方法&#xff0c;如果待排序元素为自定义类…

Django系列之日志配置

如何配置 settings.py 文件中增加如下日志模块 """logger 配置""" LOGGING {version: 1,disable_existing_loggers: False, # 是否去掉目前项目中其他地方中以及使用的日志功能&#xff0c;但是将来我们可能会引入第三方的模块&#xff0c;里…

springboot自定义表格(动态合并单元格)

一、需求展示&#xff08;一个订单多个商品&#xff0c;商品数量不限订单行合并&#xff09; 二、技术选型&#xff08;jxls自定义模板&#xff09; <!-- 版本具体看官网Release&#xff0c;这里我们使用 2.13.0 --><dependency><groupId>org.jxls</group…

fastdds之core

目录 Entity Entity

关于Android 中双list数据复制问题

1、基本类型的数据 没有hashcode 直接add 2、包含bean数据类型的list 间相互复制 不管是addall 还是 add 如&#xff1a; list1.add(list2.get(1))&#xff1b; 如果数据类型包含bean&#xff0c; debug会发现数据其实指向是一样的 当list2中数据修改时&#xff0c;list1中的数…

基于JavaWeb和mysql实现校园订餐前后台管理系统(源码+数据库)

一、项目简介 本项目是一套基于JavaWeb和mysql实现网上书城前后端管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都…

【Nginx】Nginx $remote_addr和$proxy_add_x_forwarded_for变量详解

$remote_addr 代表客户端IP。注意&#xff0c;这里的客户端指的是直接请求Nginx的客户端&#xff0c;非间接请求的客户端。假设用户请求过程如下&#xff1a; 用户客户端--发送请求->Nginx1 --转发请求-->Nginx2->后端服务器那么&#xff0c;默认情况下&#xff0c;…

Kubernetes技术--k8s核心技术 configMap

1.概述 configMap最主要的作用是存储一些不加密的数据到/etcd,让pod以变量或者数据卷(volume)挂载到容器。 应用场景:配置文件、存储信息等 2.使用 -1.创建配置文件。 这里我们需要先编写一个配置文件。使用redis,如下所示:

Android studio实现圆形进度条

参考博客 效果图 MainActivity import androidx.appcompat.app.AppCompatActivity; import android.graphics.Color; import android.os.Bundle; import android.widget.TextView;import java.util.Timer; import java.util.TimerTask;public class MainActivity extends App…