使用elementUI的form表单校验时,错误提示位置异常解决方法

问题

最近在做项目时遇到一个问题,使用elementUI的Descriptions 描述列表与form表单校验时,遇到校验信息显示的位置不对,效果如图:

期望显示在表格中。

效果

代码

html

html 复制代码
<el-form :model="form"
                       :rules="rules"
                       :size="size"
                       ref="form"
                       label-width="0px"
                       class="demo-ruleForm">
	<el-descriptions class="descriptions-box"
                                 :column="column"
                                 :size="size"
                                 border>
		<el-descriptions-item v-for="item in list"
                                        :key="item.id">
			<template slot="label">
				<span class="label-required"
                            v-if="item.attribute === 2">*</span>
				<span class="label-content"
                            :title="item.name"> {{ item.name }}</span>
			</template>
			<el-form-item :prop="item.key">
				...
			</el-form-item>
		</el-descriptions-item>
	</el-descriptions>
 </el-form>

css

css 复制代码
::v-deep {
	.demo-ruleForm {
		.el-form-item.is-error {
	      margin-bottom: 10px;
	    }
	}
}
相关推荐
CoderYanger5 分钟前
前端基础——JavaScript(WebAPI)(下篇)
java·开发语言·前端·javascript·程序人生·面试·职场和发展
kyriewen20 分钟前
AI 改祖传模块后,代码评审总绕不开两个问题
前端·程序员·ai编程
飞翔的熊blabla25 分钟前
# Webpack 5 + Jenkins 持久化缓存实战:前端构建从 288 秒降到 30 秒>
前端·webpack·jenkins
风骏时光牛马35 分钟前
AI多模态:跨越感官边界的智能新体验 要不要开启工作任务模式,帮你配套对应的文案和配图思路?
前端
IT_陈寒1 小时前
JavaScript的这个隐式转换特性差点让我加班到凌晨
前端·人工智能·后端
Loadings1 小时前
AI时代下的前端安全加固实践:安全、体积与性能之间的取舍
前端
计算机魔术师1 小时前
OpenAI 首个踩红线的 AI 模型来了:能自己挖漏洞,但只给少数人用
前端
闲坐含香咀翠1 小时前
从 132MB 到 25MB:列式存储怎么把 CPU 缓存命中率提上去的
前端·数据结构·性能优化
闲坐含香咀翠2 小时前
把 AntV S2 列头计算从 O(n²) 降到 O(n):一次开源组件的性能改造
前端·性能优化