el-table的复选框占满全格

news2024/12/26 20:49:28

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%;
			// 去掉原有的padding
			padding: 0;
			// 这个是关键,height需要设置为你表格里最大高度
			height: 40px;

			.el-checkbox {
				height: 100%;
				width: 100%;
				padding-left: 10px;
			}
		}
	}
}
</style>

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

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

相关文章

金蝶云星空审核使用了基础资料的属性字段报错:表达式计算出错

文章目录 金蝶云星空审核使用了基础资料的属性字段报错&#xff1a;表达式计算出错报错内容解决方案 金蝶云星空审核使用了基础资料的属性字段报错&#xff1a;表达式计算出错 报错内容 表达式计算出错: F_XXXX_MaterialId.FIsSNManage true and F_XXXX_ProductLibraryId 0 …

Cython笔记:基本使用方法

1 Cython 介绍 Cython 是一种编程语言&#xff0c;用于编写 C 扩展的 Python 模块。它结合了 Python 的易用性和 C 的执行效率&#xff0c;旨在提高特定类型的任务的性能&#xff0c;特别是涉及大量数值计算的任务。 1.2 几个特征 1.2.1 Python 语法的基础 Cython 的大部分语…

市场全局复盘 20231208

一、板块成交额排名&#xff1a; 资金流入前三个板块K 线&#xff1a; 行业成交额排名&#xff1a; 个股资金流入排名&#xff1a; select 成交额排名 ,近日指标提示 ,短线主题 ,涨停分析,CODE,名称,DDE大单净量,现价,量比,连板天,周涨停,月涨停,年涨停天,连涨天,…

【Nacos】在Windows环境下搭建Nacos服务与Python开发示例

在Windows环境下搭建Nacos服务与Python开发示例 Nacos是一个开源的动态服务发现、配置和服务管理平台。本文将介绍在Windows环境下搭建Nacos服务&#xff0c;并提供一个简单的Python示例&#xff0c;演示如何通过Nacos实现服务注册与发现。 官方提示&#xff1a;Nacos定义为一…

软件开发流程分析

软件开发流程分析 相关概念1 原型设计2 产品设计3 交互设计4 代码实现详细步骤 相关概念 前端&#xff1a;自研API&#xff0c;调用第三放API 后端&#xff1a;自研API&#xff0c;第三方API 数据库&#xff1a;Mysql&#xff0c;数据采集&#xff0c;数据迁移 服务器&#xf…

优势怪代码

#include <stdio.h> int main() { int t; scanf("%d", &t); // 读取测试用例的数量 while (t--) { // 对每个测试用例进行处理 int n, max1 0, max2 0, k 0; scanf("%d", &n); // 读取数组的大小 in…

瑞萨RZ/G2L核心板Linux Log目录文件详解

为了排除系统问题&#xff0c;监控系统健康状况以及了解系统与应用程序的交互方式&#xff0c;我们需要了解各log文件的作用&#xff0c;以G2L中yocto文件系统为例&#xff0c;在系统/var/log/目录下会存放记录系统中各个部分的log文件作用如下&#xff1a; 1. 文件详情 下图…

decomposition-based multi-objective algorithm4SPDPTW

关键词 文章概述 研究背景 多目标选择性接送和配送问题&#xff08;PDPs&#xff09;&#xff1a;研究涉及多目标选择性接送和配送问题&#xff0c;这些问题传统上从单一目标角度进行探讨&#xff0c;以寻找最具盈利性的请求集合&#xff0c;同时遵守一系列限制条件。 经济和…

新工科:数据科学与大数据技术实验中心解决方案,赋能高校新工科数智人才培养

随着数字经济蓬勃发展&#xff0c;数字化产业和产业数字化成为就业增长新动能。据人瑞人才与德勤调研显示&#xff0c;未来3年&#xff0c;数字产业化企业最需要运营人员和开发人员&#xff08;包括大数据开发工程师、数据建模开发工程师等&#xff09;&#xff0c;其次是数据分…

一、微前端目标、前端架构的前生今世、微前端架构优势和劣势、软件设计原则与分层

1、目标 2、前端架构的前世今生 ① 初始&#xff1a;无架构&#xff0c;前端代码内嵌到后端应用中 ② 后端 MVC 架构&#xff1a;将视图层、数据层、控制层做分离 缺点&#xff1a;重度依赖开发环境&#xff0c;代码混淆严重&#xff08;在调试时&#xff0c;需要启动后端所有…

【VRTK】【VR开发】【Unity】14-移动倍增

课程配套学习资源下载 https://download.csdn.net/download/weixin_41697242/88485426?spm=1001.2014.3001.5503 【背景】 本篇介绍最后一个VRTK提供的Locomotion特性,移动倍增器。提供这个特性的原因,是为了让实际有限的物理空间(比如说我的小房间)能够在游戏中提供大范…

[c++]—vector类___基础版(带你了解vector熟练掌握运用)

&#x1f469;&#x1f3fb;‍&#x1f4bb;作者:chlorine 目录 &#x1f393;标准库类型vector &#x1f393;定义和初始化vector的对象 &#x1f4bb;列表初始化vector对象 &#x1f4bb;创建指定数量的元素 &#x1f576;️值初始化 ❗列表初始化还是值初始化&#xf…

软件设计师——软件工程(一)

&#x1f4d1;前言 本文主要是【软件工程】——软件设计师——软件工程的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304…

JavaFX的对话框

JavaFX的对话框主要分为提示对话框&#xff08;Alert&#xff09;和文件对话框两类&#xff0c;其中提示对话框又分作消息对话框、警告对话框、错误对话框、确认对话框四种。这四种对话框都使用Alert控件表达&#xff0c;并通过对话框类型加以区分。 AlertType.NONE&#xff1…

件夹和文件比较软件VisualDiffer mac功能介绍

VisualDiffer mac是一款运行在MacOS上的文件夹和文件快速比较工具。VisualDiffer可以对不同文件夹中文件或文档做出比较或者比较两个文件的路径。还可以通过UNIS diff命令快速、标准和可靠的比较出各类不同的文件夹和文件结果&#xff0c;使用不同的颜色直观地显示。 VisualDif…

基于单片机智能浇花控制系统设计

**单片机设计介绍&#xff0c;基于单片机智能浇花控制系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的智能浇花控制系统可以通过水泵、传感器和单片机等硬件组件实现自动浇水&#xff0c;减轻人工浇花的工作…

酷滴科技出席浦发银行第七届国际金融科技创新大赛

12月7日&#xff0c;浦发银行全球金融科技创新大赛在上海展开决赛。本届大会以“科技金融&#xff0c;激发创新力量”为主题&#xff0c;聚焦金融行业数字化转型过程中的痛点与难点&#xff0c;旨在探讨新时代下金融科技的新角色、新机遇以及新挑战。酷滴科技CEO张沈分享了酷滴…

网络基础(七):传输层协议介绍

目录 一、TCP协议&#xff08;传输控制协议&#xff09; 1、TCP协议介绍 2、TCP协议特性 3、TCP报文格式 4、TCP的三次握手 4.1TCP三次握手的概念 4.2TCP三次握手流程图 4.3 TCP三次握手阐释说明 5、TCP的四次挥手 5.1TCP四次挥手的概念 5.2TCP四次挥手的流程图 5.…

MySQL数据库——锁-表级锁(表锁、元数据锁、意向锁)

目录 介绍 表锁 语法 特点 元数据锁 介绍 演示 意向锁 介绍 分类 演示 介绍 表级锁&#xff0c;每次操作锁住整张表。锁定粒度大&#xff0c;发生锁冲突的概率最高&#xff0c;并发度最低。应用在MyISAM、InnoDB、BDB等存储引擎中。 对于表级锁&#xff0c;主要…

108.STL adjacent_find算法

adjacent_find 是C STL中的算法之一&#xff0c;用于在指定范围内查找相邻重复的元素&#xff0c;返回第一对相邻重复元素的第一个元素的迭代器。 以下是 adjacent_find 的基本用法&#xff1a; #include <iostream> #include <algorithm> #include <vector>…