使用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;
	    }
	}
}
相关推荐
小满zs9 小时前
Next.js精通SEO第四章(JSON-LD + web vitals)
前端·seo·next.js
云水一下17 小时前
从零开始!VMware安装Fedora Workstation 44桌面系统完整教程
前端
小码哥_常18 小时前
安卓黑科技:实现多平台商品详情页一键跳转APP
前端
killerbasd18 小时前
还是迷茫 5.3
前端·react.js·前端框架
不会敲代码119 小时前
TCP/IP 与前端性能:从数据包到首次渲染的底层逻辑
前端·tcp/ip
kyriewen19 小时前
奥特曼借GPT-5.5干杯,而你的Copilot正按Token收钱
前端·github·openai
AC赳赳老秦19 小时前
投标合规提效:用 OpenClaw 实现标书 / 合同自动审核、关键词校验、格式优化,降低废标风险
开发语言·前端·python·eclipse·emacs·deepseek·openclaw
kyriewen19 小时前
代码写成一锅粥?3个设计模式让你的项目“起死回生”
前端·javascript·设计模式
千寻girling20 小时前
《 Git 详细教程 》
前端·后端·面试
之歆21 小时前
DAY08_CSS浮动与行内块布局实战指南(下)
前端·css