el-table的复选框占满全格

el-table的复选框格子很小每次点击都点不到,又不想设置行点击,因为每次复制内容都会选中,实现效果是点击el-table的复选框单元格就可以选中

<template><div style="width: 60vw; margin: 10px;"><el-table :data="state.tableData" ref="multipleTableRef" @selection-change="handleSelectionChange" border><el-table-column type="selection" width="55" :class-name="'all-selection'" /><el-table-column type="index" label="序号" width="55" align="center" fixed />// 如果某一行的内容超出的话添加超出省略 show-overflow-tooltip 或者增大复选框的高度<el-table-column label="姓名" prop="name" align="center" show-overflow-tooltip/><el-table-column label="年龄" prop="age" align="center" /></el-table></div>
</template><script setup>
import { ref, reactive, onMounted } from 'vue';
// 表格ref
const multipleTableRef = ref();
// 存放选中数据
const multipleSelection = ref();const state = reactive({tableData: [{name: '张三',age: 1,},{name: '张四',age: 2,},{name: '张五',age: 3,},],
});onMounted(() => {});// 选中的回调
const handleSelectionChange = (val) => {multipleSelection.value = val;
};
</script><style scoped lang="scss">
:deep(.el-table__body) {.all-selection {.cell {// 宽度设置满格width: 100%;// 去掉原有的paddingpadding: 0;// 这个是关键,height需要设置为你表格里最大高度height: 40px;.el-checkbox {height: 100%;width: 100%;padding-left: 10px;}}}
}
</style>

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

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

相关文章

Java小案例-RocketMQ的11种消息类型,你知道几种?(延迟消息)

前言 上一节给大家讲了Rocket的顺序消息&#xff0c;这一节和大家聊一下延迟消息&#xff0c;关于顺序消息大家可以点下面这个链接直接看 RocketMQ的延迟消息 延迟消息 延迟消息就是指生产者发送消息之后&#xff0c;消息不会立马被消费&#xff0c;而是等待一定的时间之后…

计算机硬件 3.3其他存储设备

第三节 其他存储设备 一、固态硬盘&#xff08;SSD&#xff09; 1.优点&#xff1a;读写速度快、防震抗摔、低功耗、无噪声、轻便。 2.缺点&#xff1a;容量小、寿命限制、售价高。 3.接口&#xff1a;SATA3、M.2、Type-C、mSATA等。 4.分类&#xff1a;盒装式、插卡式。 二…

十五 动手学深度学习v2计算机视觉 ——全连接神经网络FCN

文章目录 FCN FCN 全卷积网络先使用卷积神经网络抽取图像特征&#xff0c;然后通过卷积层将通道数变换为类别个数&#xff0c;最后通过转置卷积层将特征图的高和宽变换为输入图像的尺寸。 因此&#xff0c;模型输出与输入图像的高和宽相同&#xff0c;且最终输出通道包含了该空…

海思平台isp之ccm标定

文章目录 1、raw图采集2、ccm标定2.1、标定参数配置2.2、标定效果优化2.2.1、优化方式一2.2.2、优化方式二2.2.3、优化方式三1、raw图采集 raw图采集步骤及标准,请参考文章 《海思平台isp之ccm标定》。2、ccm标定 2.1、标定参数配置 (1)图像基本参数 (2)黑电平设置 (…

Spring-MVC-文件上传下载

依赖 <dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.3</version> </dependency> <dependency><groupId>javax.servlet</groupId><artif…

mac视频调色 DaVinci Resolve Studio 18 中文 for Mac

DaVinci Resolve Studio 18是一款功能强大、专业可靠的视频编辑软件&#xff0c;适用于各种规模的媒体项目制作。无论是独立制片人还是大型制片公司&#xff0c;都可以借助该软件进行高质量的视频创作和后期制作。 得编辑工作更加高效和灵活。 调色和色彩校正&#xff1a;软件…

国外博士论文下载网址

系列文章目录 前言 如果你想补充其他相关网址&#xff0c;请留言 一、pqdtcn 1.1 使用说明 浏览本数据库建议使用chrome浏览器&#xff01; ProQuest检索平台在今年暑假做了界面升级。为了使您能更快了解升级后的界面功能&#xff0c;ProQuest公司准备了中文版用户使用手册…

【CSS】前端点点点加载小点样式css动画过程实现

对话的 ... 加载动画&#xff0c;直接用 CSS 就可以实现&#xff0c;样式可以自己改&#xff0c;逻辑大差不差 <div class"loading-text"><span class"dot1"></span><span class"dot2"></span><span class&quo…

RabbitMQ入门案例

RabbitMQ 是目前比较主流的MQ消息队列中间件&#xff0c;下面简单总结RabbitMQ入门时所做的一些笔记 1.RabbitMQ 入门案例 需求&#xff1a;用 Java 编写两个程序。发送单个消息的生产者和接收消息并打印出来的消费者 1.1 添加依赖 <!--rabbitmq 依赖客户端--> <de…

Java 线程创建的方法和原理

创建线程 方法一&#xff1a;Thread 类 创建Thread类的对象&#xff0c;重写其中的 run 方法&#xff1a; Slf4j(topic "c.Test1") public class d1_Thread {public static void main(String[] args) {// 创建 Thread 类的对象Thread t new Thread(){Overridepu…

SQL进阶理论篇(六):索引的使用原则

文章目录 简介什么时候创建索引&#xff1f;什么时候不需要创建索引索引在什么情况下会失效索引使用举例&#xff08;兴趣篇&#xff09;参考文献 简介 如何通过索引让查询效率最大化呢&#xff1f;本节主要考虑以下几个问题&#xff1a; 什么样的情况下需要创建索引&#xf…

C++中的reverse函数

1.实现反转数组。 //头文件 #include <algorithm> //使用方法 reverse(a, an);//n为数组中的元素个数 #include<cstdio> #include<iostream> #include<algorithm> using namespace std; int main() {int a[100];int n,k;cin >> n >> k; …

基于SpringBoot的停车位预约管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的停车位预约管理系统,ja…

八大排序(插入排序 | 选择排序 | 冒泡排序)

在我们内存中我们一般会有一些没有顺序的数据&#xff0c;我们成为内排序&#xff0c;而今天分享八大排序的是时间复杂度为O&#xff08;N^2&#xff09;的插入排序&#xff0c;选择排序和教学意义比较强的冒泡排序。 插入排序 这是插入排序的动图&#xff0c;通过动图我们也…

PHP中如何处理文件上传?

在 PHP 中处理文件上传通常涉及到以下几个步骤&#xff1a; HTML 表单设置&#xff1a; 在 HTML 表单中设置 enctype 属性为 "multipart/form-data"&#xff0c;这是处理文件上传所必须的。 <form action"upload.php" method"post" enctype&q…

Python3 中常见的数据类型

目录 数字(Number)总结 字符串(String)字符串运算符字符串格式化字符串的截取总结 List&#xff08;列表&#xff09;更新列表删除列表元素列表函数&方法总结 Tuple&#xff08;元组&#xff09;修改元组删除元组总结 Set&#xff08;集合&#xff09;Dictionary&#xff0…

重新格式化字符串

说在前面 &#x1f388;不知道大家对于算法的学习是一个怎样的心态呢&#xff1f;为了面试还是因为兴趣&#xff1f;不管是出于什么原因&#xff0c;算法学习需要持续保持。 题目描述 给你一个混合了数字和字母的字符串 s&#xff0c;其中的字母均为小写英文字母。 请你将该字…

npm、yarn常用命令

1、设置npm路径 #全局安装路径 npm config set prefix "D:\Program Files\nodejs\node_global" #缓存路径 npm config set cache "D:\Program Files\nodejs\node_cache"2、设置镜像 #1,淘宝镜像源 npm config set registry https://registry.npmmirror.…

3D点云广义零样本分类的递归循环对比生成网络笔记

1 Title Contrastive Generative Network with Recursive-Loop for 3D point cloud generalized zero-shot classification(Yun Hao, Yukun Su, Guosheng Lin, Hanjing Su, Qingyao Wu)【Pattern Recognition】 2 Conclusion This work aims to facilitate research on 3D poi…

【Spring Boot】内网穿透实现远程调用调试

文章目录 1. 本地环境搭建1.1 环境参数1.2 搭建springboot服务项目 2. 内网穿透2.1 安装配置cpolar内网穿透2.1.1 windows系统2.1.2 linux系统 2.2 创建隧道映射本地端口2.3 测试公网地址 3. 固定公网地址3.1 保留一个二级子域名3.2 配置二级子域名3.2 测试使用固定公网地址 4.…