【element表头添加红色星号】

最新推荐文章于 2025-03-17 09:51:55 发布

梦禄

最新推荐文章于 2025-03-17 09:51:55 发布

阅读量1.1k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_71311086/article/details/135484731

版权

文章介绍了如何在ElementUI表格的表头单元格添加红色星号，并处理表单验证时输入框被顶上的问题，通过CSS定义样式穿透来解决。同时，作者邀请读者分享更佳解决方案。

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

element表头添加红色星号

1.在标签中添加 :header-cell-class-name=“start”

<el-table :header-cell-class-name="start">

2.在script中谱写

 const start=({row,rowIndex,column,columnIndex})=> {
    if (columnIndex == 9) {
      return 'start'
    }
  }

最后在css中，v3中如果表格添加了表单校验提示信息可能会将输入框顶上去，可以定义类名tableTrayQuality穿透
（这只是其中之一的方法）

:deep(.tableTrayQuality .el-form-item){
  margin-bottom: 0 !important;
}
:deep(.el-table table tr th.start div:before){
    content: '*';
    color:red;
  }

当我们给表格去添加校验，可能校验提示的文字会把输入框顶上去
在这里插入图片描述
可以给el-table添加个类名去设置样式。缺点是校验提示的文字不会显示
如果有更好的方法欢迎评论

:deep(.tableTray .el-form-item){
  margin-bottom: 0 !important;
}

在这里插入图片描述