关于 ElementUI 表格中的CheckBox 点击后发生偏移跟CheckBox后出现小圆点的问题

原创 已于 2022-08-28 20:58:22 修改 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #前端 #javascript

于 2022-08-28 20:55:13 首次发布
本文介绍了ElementUI表格组件中CheckBox选中偏移及后方出现小圆点的问题，并提供了通过调整宽度来解决这些问题的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于 ElementUI 表格中的CheckBox 点击后发生偏移跟CheckBox后出现小圆点的问题

在自己使用ElementUI的表格时遇到了两个问题，出现这两个问题的原因都是同一个问题导致的—宽度不足
1、CheckBox选中时出现偏移问题

<el-table-column
  type="selection"
  width="25"> 
 //当宽度小于30的时候会出现向左偏移问题
 </el-table-column>

2、CheckBox后出现一个实心小圆点

<el-table-column
  type="selection"
  width="30"> 
 //当宽度等于30的时候会在选择框后出现一个小圆点
 </el-table-column>

解决方法：以上两个问题，将宽度设置为大于30即可解决

~-小白菜-~
关注
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7165
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
使用Vue 与 mui slider scroll框架遇到的问题记录
qq_35500233的博客
05-07 997
使用mui框架作为移动端开发的前端框架，使用vue作为前端与后端数据对接的框架，在使用过程中遇到了一些问题现整理如下：框架的版本号：Mui v3.7.2 Vue.js v2.6.10 需求描述：如下图所示，可以实现左右滑动切换题目，同时点击下面的上一题下一题也可以进行题目的切换，点击对应的题号可以跳转到对应题号的界面 第一种实现方式： 使用mui 的slider 的轮播这个组件 HTM...
element 级联选择框偏移
c_qianxia5040的博客
08-30 458
在弹出框的定位出现问题时，可将该属性设置为 false。如图所示，选择之后，位置跑到了左上角。
el-table复选框选中之后出现漂移
weixin_45448764的博客
10-13 458
el-table复选框选中之后出现漂移
【bug】el-table设置复选框，行编辑的时候复选框的勾选错位
花椒和蕊的博客
01-05 858
bug
复选框旁边出现三个点
PaoMianXianShen的博客
08-10 1774
代码bug
使用el-table表格时末尾有个小圆点分析与解决
h395910638的博客
07-01 1705
使用el-table表格，调整样式时末尾出现小圆点问题分析与解决
``` input:checked+span:before { transform: translateX(46px); } ```
01-23
这段 CSS 代码用于定义当复选框 (`input`) 被选中时，紧跟在其后的 `span` 元素的伪类 `::before` 内容会发生的变化。具体来说，它是用来实现类似于开关（toggle switch）效果的一部分逻辑：当选中输入框后，滑块会...
前端开发日志
m0_58992616的博客
05-26 3789
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、前端基础代码二、实现案例1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 学习前端的第三天 提示：以下是本篇文章正文内容，下面案例可供参考 一、前端基础代码 <h1>标题</h1> </br>换行 <p>段落标签</p> <strong>加粗</strong> 倾斜 &.
Web前端----移动端库和bootstrap框架
Python美丽星球--微信(Felixzfb)
11-26 1230
Web前端笔记 第十一部分：js移动端库和bootstrap框架，re正则 1. 移动端js事件 移动端的操作方式和PC端是不同的，移动端主要用手指操作， 所以有特殊的touch事件，touch事件包括如下几个事件： 1、touchstart: //手指放到屏幕上时触发 2、touchmove: //手指在屏幕上滑动式触发 3、touchend: //手指离开屏幕时触发 4、touchcanc...
Element多选框组el-checkbox-group，重新勾选时数组顺序被打乱?
林深时见鹿
03-18 1311
最近使用element的el-checkbox-group组件，发现多选点击之后，最后得到的数据是乱的。顺序点击没问题，如果不按顺序点击，后台得到的数据是乱序的。比如我的表单是这样的，我可能会选择三个中的某一个，又或者先点第三个再点第三个，这样后台得到的数据顺序是“证件报告,设备报告”，但是其实我想要的是“设备报告,证件报告”。因为对我的数组是没法排序的汉字之类的，就只能用checkbox的数组进行filter，挨个去过滤是否在已选的数组中；此次，就验证了我们前面说到的问题，解决了排序的问题；
解决element ui表格内容偏移问题
m0_46097421的博客
11-14 835
解决element ui表格内容偏移问题
解决多个el-checkbox内容折行对不齐问题（可以限制每行展示的个数）
migexiaoliang的博客
06-28 3721
有时候使用element的el-checkbox-group多个el-checkbox内容折行后不对齐，如下图所示：可以用样式来调整（可以限制每行展示的个数）实现代码： css代码： 代码解释： 鼠标悬停后展示全部 最终效果图：...
vue + elementui在火狐浏览器中会有一些错位的问题
li00828的博客
04-11 6120
问题：样式错位，比如会向下偏移等解决方案：    查看错位标签是否设置有flex-wrap:wrap;        如果有把值改为nowrap试一试
列表包含checkBox错位以及选中事件
jifashihan的博客
10-09 1785
效果图： 列表项使用了ExpandableTextView，在上一篇博客中提到了用法和使用中遇到的坑：使用ExpandableTextView遇到的坑，在列表中，包含了checkBox，比较容易出现的问题就是在列表中，选中项会错位，原因参照资料：Android ListView CheckBox状态错乱。我在程序中使用了Map来保存是否选中的状态，第二个问题就是点击事件，如果写在setOnCh
element ui 编辑时表格闪动的解决办法
m0_61096379的博客
11-21 720
this.ruleForm=JSON.parse(JSON.stringify(row))
radiobutton 带小圆点_RadioButtonRenderer
weixin_35880151的博客
02-04 198
RadioButtonRenderer 类定义程序集:System.Windows.Forms.dll提供用于呈现带/不带视觉样式的选项按钮控件(也称为单选按钮)的方法。Provides methods used to render an option button control (also known as a radio button) with or without visual styl...
border-radius不生效，elementplus组件圆角，vue3
weixin_57997644的博客
04-28 2334
原因是elementplus中组件的四个角溢出了，要把溢出的隐藏掉加入overflow: hidden; 只为记录学习遇到的问题
elementui j解决checkbox aria-hidden报错问题
最新发布
03-20
### ElementUI 中 Checkbox 组件出现 `aria-hidden` 报错的解决方案 在使用 ElementUI 的过程中，可能会遇到某些情况下组件触发了可访问性（Accessibility）相关的警告或错误，比如 `aria-hidden="true"` 导致的问题。这类问题通常是因为 HTML 元素上的 ARIA 属性配置不当引起的。 #### 问题分析 ARIA 是 Accessible Rich Internet Applications 的缩写，用于提升网页和应用的无障碍支持能力。当某个元素被标记为 `aria-hidden="true"` 后，意味着它不会被屏幕阅读器或其他辅助技术识别。然而，在实际场景中，如果一个交互性的控件（如复选框）被误设为不可见状态，则会引发冲突并导致报错。 根据已知的信息[^1] 和前端开发经验可知，隐藏逻辑可能涉及多种实现方式，例如通过 CSS 隐藏属性 (`display`, `visibility`) 或者 JavaScript 动态操作 DOM 节点。这些方法的选择会对用户体验和无障碍设计产生影响。 --- #### 解决方案 以下是几种常见的解决策略： 1. **调整样式隐藏行为** 如果当前代码试图通过修改输入框的状态来达到某种视觉效果，可以考虑改用父容器控制显示/隐藏而非直接作用于子节点本身。例如： ```css /* 使用 display:none 来完全移除元素 */ .hidden-element { display: none; } ``` 这种做法能够彻底消除目标对象及其后代的内容呈现，并且避免因单独设置 input 标签而带来的副作用[^2]。 2. **自定义渲染结构** 对于特定需求下的复杂表单构建，推荐利用框架扩展功能来自定义组件外观。以 Vue.js 结合 Element Plus为例，可以通过插槽机制重新定义内部布局： ```vue <template> <el-checkbox v-model="checked"> <!-- 自定义内容 --> Custom Label Text </el-checkbox> </template> <script> export default { data() { return { checked: false }; }, }; </script> ``` 此外还需要确保最终生成的 HTML 符合 WAI-ARIA 规范要求[^3]。 3. **升级依赖版本** 官方维护团队或许已经意识到此类潜在缺陷并在后续迭代中修复它们；因此建议及时更新至最新稳定版库文件以便获取改进特性与修正补丁。 4. **手动干预 ARIA 值** 当确认无其他更优选项可用时，最后一种备选措施便是显式覆盖默认赋予的相关参数值。不过需要注意的是这种方式存在风险——即有可能破坏原有预期表现或者与其他部分发生连锁反应。 --- ### 总结说明 综上所述，针对 ElementUI 中 CheckBox 出现 `aria-hidden` 错误的情况可以从多个角度入手加以改善。具体采用哪种手段取决于项目的实际情况以及个人偏好等因素综合考量决定。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值