使用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;
	    }
	}
}
相关推荐
小小编程路5 小时前
C++ 块作用域详解:从基础到实战
前端·javascript·vue.js
虚惊一场6 小时前
MarkView:纯前端 Markdown 实时预览工具的架构设计
前端·javascript·vue.js
hunterandroid6 小时前
[鸿蒙从零到一] ArkUI 常用布局实战:Column、Row、Stack 与 Flex
前端
海上彼尚6 小时前
Nodejs也能写Agent - 17.LangGraph篇 - Checkpointer 与 Memory
前端·javascript·人工智能·langchain·node.js
盛夏绽放6 小时前
Hermes Agent 全栈安装、配置与Web端架构深度解析(官方命令版·最终优化)
前端·架构·hermes
早期的虫儿有鸟吃6 小时前
Vue3
前端·javascript·vue.js
hqk6 小时前
我给 AI 造了一个原型工具:AIWireframeViewer V1
前端·ai编程·vibecoding
Highcharts.js7 小时前
商业授权与开源图表库如何选择?
前端·javascript·开源·highcharts·chart.js·echarts.js
工具派7 小时前
写代码时,我把这个本地 AI Commit Message 生成器接进了工作流
前端·后端
LaughingZhu7 小时前
Product Hunt 每日热榜 | 2026-07-15
前端·人工智能·神经网络·react.js·搜索引擎·前端框架