el-tabel表格加个多选框

<template><div><el-checkbox v-model="checked" :disabled="checkedDis" @change="onAllSelectChange">多选框</el-checkbox>点击多选框,禁用列表复选框<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" :selectable="() => {return selectable;}" /><el-table-column label="日期" width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-column prop="name" label="姓名" width="120" /><el-table-column prop="address" label="地址" show-overflow-tooltip /></el-table></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',status: 1}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-07',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],checked: false, // 多选checkedDis: false, // 禁用多选框selectable: true, // 禁用列表复选框multipleSelection: [] // 选中的数据}},methods: {// 多选框onAllSelectChange () {this.tableData.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row)})this.checkedDis = false// 点击多选框,禁用列表复选框this.selectable = this.multipleSelection.length > 0 ? false : true},// 全选handleSelectionChange (val) {// 有数据则禁用多选框this.checkedDis = val.length > 0this.multipleSelection = val}}
}
</script><style>
</style>

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

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

相关文章

Nginx+keepalived实现七层的负载均衡

1.keepalived VRRP 介绍 keepalived是什么&#xff1f; keepalived是集群管理中保证集群高可用的一个服务软件&#xff0c;用来防止单点故障。 keepalived工作原理 keepalived是以VRRP协议为实现基础的&#xff0c;VRRP全称Virtual Router Redundancy Protocol&…

CMMI/ASPICE认证咨询及工具服务

服务概述 质量专家戴明博士的名言“如果你不能描述做事情的过程&#xff0c;那么你不知道你在做什么”。过程是连接有能力的工程师和先进技术的纽带&#xff0c;因此产品开发过程直接决定了产品的质量和研发的效率。 经纬恒润可结合多体系要求&#xff0c;如IATF16949\ISO26262…

解决VSCode使用SSH远程连接时无法指定用户名的问题

Windows 11自带OpenSSH客户端&#xff0c;和VSCode配合得很好&#xff0c;没有这个问题。 今天要说的是旧版本Windows 7/8/10系统遇到的问题。 PS: Windows 7可以运行的最后版本是VSCode 1.80.2 由于Windows 7/8/10没有自带的OpenSSH客户端&#xff0c;但可以调用MSYS环境下的…

PyQt界面开发的终极指南

文章目录 前言一、PyQt 简介二、PyQt 与 Qt 的蒙娜丽莎三、PyQt 布局管理器3.1、简介3.2、项目实战3.2.0、添加伸缩项 layout.addStretch&#xff1a;控制布局中组件之间的间距。3.2.1、垂直布局管理器 QVBoxLayout&#xff1a;控件按照从上到下的顺序排列3.2.2、水平布局管理器…

Yuhan Blu-ray DVD Creator for Mac: 打造专属的高清视听盛宴

在如今的高清时代&#xff0c;谁能拒绝一款能够轻松将高清影片刻录成蓝光DVD的刻录机呢&#xff1f;而Yuhan Blu-ray DVD Creator for Mac正是这样一款令人惊艳的软件。 作为一款专为Mac用户打造的蓝光DVD刻录机&#xff0c;Yuhan Blu-ray DVD Creator for Mac支持将各种高清视…

KanTts最小安装-ubuntu

为什么选它&#xff1f; 克隆有很多&#xff0c;为什么选它&#xff0c;它是中国人做的&#xff0c;阿里达摩院&#xff0c;5分钟音频数据集就够了。 国内做的有什么好处&#xff0c;因为大家都是中国人&#xff0c;说的是中国话&#xff0c;技术最大的难题不是基础&#xff…

Spring Boot 使用断言抛出自定义异常,优化异常处理机制

文章目录 什么是断言&#xff1f;什么是异常&#xff1f;基于断言实现的异常处理机制创建自定义异常类创建全局异常处理器创建自定义断言类创建响应码类创建工具类测试效果 什么是断言&#xff1f; 实际上&#xff0c;断言&#xff08;Assertion&#xff09;是在Java 1.4 版本…

【云原生-K8s】Kubernetes安全组件CIS基准kube-beach安装及使用

基础介绍kube-beach介绍kube-beach 下载百度网盘下载wget下载 kube-beach安装kube-beach使用基础参数示例结果说明 基础介绍 为了保证集群以及容器应用的安全&#xff0c;Kubernetes 提供了多种安全机制&#xff0c;限制容器的行为&#xff0c;减少容器和集群的攻击面&#xf…

从前序与中序遍历序列构造二叉树

代码如下&#xff0c;开袋即食 class Solution {private Map<Integer,Integer> map;public TreeNode buildTree(int[] preorder, int[] inorder) {map new HashMap<>();for(int i 0;i<preorder.length;i){map.put(inorder[i],i);}return build(preorder,inord…

【K_means】在矢量量化图像压缩中的应用

我们我们先来导入相应的模块&#xff0c;并看看要压缩的图片&#xff1a; import numpy as np import matplotlib.pyplot as plt from sklearn.cluster import KMeans from sklearn.metrics import pairwise_distances_argmin#对两个序列中的点进行距离匹配的函数 from sklear…

为什么需要Code Review?

1. Code Review 是什么&#xff1f; 代码审查&#xff08;Code Review&#xff09;是软件开发过程中对代码进行系统性检查和评审的一项活动。它是指团队成员之间相互检查彼此编写的代码&#xff0c;以确保代码质量、可读性和符合编码标准等。 2. Code Review 的必要性 ● 提…

第4章_运算符

文章目录 1. 算术运算符1.1 加法与减法运算符1.2 乘法与除法运算符1.3 求模运算符 2. 比较运算符2.1 等号运算符2.2 安全等于运算符2.3 不等于运算符2.4 空运算符2.5 非空运算符2.6 最小值运算符2.7 最大值运算符2.8 BETWEEN AND运算符2.9 IN运算符2.10 NOT IN运算符2.11 LIKE运…

分享一下怎么做陪诊小程序

在当今快节奏的社会中&#xff0c;人们的生活压力越来越大&#xff0c;尤其是在大城市中&#xff0c;由于工作繁忙&#xff0c;生活节奏快&#xff0c;很多人都感到看病难、看病贵的问题。为了解决这一问题&#xff0c;陪诊小程序应运而生。陪诊小程序是一种可以提供线上预约、…

springboot之拦截器、servlet过滤器

一 使用maven新建Spring Boot项目 1. File --> New --> Project... --> Maven &#xff0c;如下图所示 Project SDK下拉列表框中选择前面安装的 Java1.8&#xff0c;如果下拉列表框中不存在Java 1.8&#xff0c;可以单击New按钮&#xff0c;找到安装Java的位置&…

【JS】this指向

一、this指向的四种规则 1.默认绑定规则 对象指向&#xff0c;比较的是引用地址。 console.log(this window); //true console.log({} {}); //false //函数的独立调用 function test(){console.log(this window); //true } test(); 2.隐式绑定规则 谁调用…

CCS3列表和超链接样式

在默认状态下&#xff0c;超链接文本显示为蓝色、下画线效果&#xff0c;当鼠标指针移过超链接时显示为手形&#xff0c;访问过的超链接文本显示为紫色&#xff1b;而列表项目默认会缩进显示&#xff0c;并在左侧显示项目符号。在网页设计中&#xff0c;一般可以根据需要重新定…

linux驱动开发环境搭建

使用的是parallel 创建的ubuntu 16.04 ubuntu20.04虚拟机 源码准备 # 先查看本机版本 $ uname -r 5.15.0-86-generic# 搜索相关源码 $ sudo apt-cache search linux-source [sudo] password for showme: linux-source - Linux kernel source with Ubuntu patches linux-sourc…

初出茅庐的小李博客之STCW15408AS单片机串口1使用记录

STCW15408AS单片机串口1使用记录 资源介绍&#xff1a; STC15W401AS系列单片机是STC生产的单时钟/机器周期(1T)的单片机&#xff0c;是宽电压/高可靠/低功耗/超强抗干扰的新一代8051单片机&#xff0c;采用STC第九代加密技术&#xff0c;无法解密&#xff0c; 代码完全兼容传…

【c++|opencv】二、灰度变换和空间滤波---2.直方图和均衡化

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 图像直方图、直方图均衡化 1. 图像直方图 #include <iostream> #include <opencv2/opencv.hpp>using namespace cv; using namespace std;…

基于SC-LeGO-LOAM的建图和ndt_localizer的定位

link 基于SC-LeGO-LOAM的建图和ndt_localizer的定位 链接: link. SC-LeGO-LOAM 链接: link. ndt_localizer 将建图和定位两部分分开&#xff0c;利用SC-LeGO-LOAM进行建图&#xff0c;相比于LeGO-LOAM&#xff0c;其采用了Scan Context方法&#xff0c;对点云地图进行闭环检测和…