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.hqwc.cn/news/266924.html

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

相关文章

OpenAI承认GPT-4变懒,即将发布修复方案提升性能

目录 1OpenAI承认GPT-4变懒&#xff0c;即将发布修复方案提升性能 2一文秒懂人工智能全球近况 1OpenAI承认GPT-4变懒&#xff0c;即将发布修复方案提升性能 **划重点:** 1. &#x1f92f; 用户反馈:GPT-4使用者抱怨OpenAI破坏了体验&#xff0c;称模型几乎“害怕”提供答案。…

没有明确的报错信息,阿里云国际版Windows服务器无法远程连接

在远程连接失败时&#xff0c;如果您没有收到系统返回的报错信息&#xff0c;并且ECS实例是运行中的状态&#xff0c;然后再根据以下步骤进行排查&#xff1a; 步骤一&#xff1a;使用阿里云Workbench工具测试远程登录 步骤二&#xff1a;检查是否有收到黑洞通知 步骤三&…

vue2-elementUI部分组件样式修改

el-radio样式&#xff1a; /deep/ .el-radio__input .el-radio__inner {width: 20px;height: 20px;position: relative;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;border: 1px solid #999;border-radius: 0;outline: none;transition…

记录 | xftp远程连接两台windows

1、打开openssh 设置 -> 应用 -> 可选功能 -> 添加功能 -> OpenSSH 客户端&#xff0c;将 ssh 客户端安装将两台电脑的 ssh 开启&#xff0c;cmd 中输入 net start sshd2、配置 win10 账号密码 3、进行 xftp 连接

Flink之迟到的数据

迟到数据的处理 推迟水位线推进: WatermarkStrategy.<Event>forBoundedOutOfOrderness(Duration.ofSeconds(2))设置窗口延迟关闭&#xff1a;.allowedLateness(Time.seconds(3))使用侧流接收迟到的数据: .sideOutputLateData(lateData) public class Flink12_LateDataC…

两线制 4-20mA 隔离变送器(输出回路供电)

两线制 4-20mA 隔离变送器(输出回路供电) 特征&#xff1a; ◆低成本&#xff0c;小体积&#xff0c;符合 UL94-V0 阻燃标准 ◆安装方式采用国际标准 DIN35mm 导轨安装方式 ◆双隔离(信号输入、信号输出相互之间 3000VDC 隔离) ◆4-20mA 电流输入与输出&#xff0c;精度高(失真…

Vue3封装一个轮播图组件

先看效果 编写组件代码 CarouselChart.vue <template><div classimg-box><el-button clickpreviousImages v-ifprops.showBtn>←</el-button><div classimg><div styledisplay: flex;gap: 20px idmove><imgclassimg-item v-for(item…

TrustZone之安全虚拟化

在Armv7-A首次引入虚拟化时,它仅在非安全状态中添加。在Armv8.3之前,Armv8也是如此,如下图所示: 如前所述在切换安全状态时,EL3用于托管固件和安全监视器。安全EL0/1托管受信任的执行环境(TEE),由受信任的服务和内核组成。 在安全状态下,没有对多个虚拟机的需…

云计算 云原生

一、引言 云计算需要终端把信息上传到服务器&#xff0c;服务器处理后再返回给终端。在之前人手一台手机的情况下&#xff0c;云计算还是能handle得过来的。但是随着物联网的发展&#xff0c;什么东西都要联网&#xff0c;那数据可就多了去了&#xff0c;服务器处理不过来&…

【docker】常用命令

启动docker服务 systemctl start docker 停止docker服务 systemctl stop docker 重启docker服务 systemctl restart docker 查看docker服务状态 systemctl status docker 设置开机启动docker服务 systemctl enable docker 设置关闭开机启动docker服务 systemctl disable …

设计模式——建造者模式(创建型)

引言 生成器模式是一种创建型设计模式&#xff0c; 使你能够分步骤创建复杂对象。 该模式允许你使用相同的创建代码生成不同类型和形式的对象。 问题 假设有这样一个复杂对象&#xff0c; 在对其进行构造时需要对诸多成员变量和嵌套对象进行繁复的初始化工作。 这些初始化代码…

修改汽车的控制系统实现自动驾驶,基于一个开源的汽车驾驶辅助系统实现全自动驾驶

修改汽车的控制系统实现自动驾驶,基于一个开源的汽车驾驶辅助系统实现全自动驾驶。 自动驾驶汽车依靠人工智能、视觉计算、雷达、监控装置和全球定位系统协同合作,让电脑可以在没有任何人类主动的操作下,自动安全地操作机动车辆。 演示视频: Openpilot :一个开源的汽车驾…