使用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;
	    }
	}
}
相关推荐
ayqy贾杰28 分钟前
基层管理的三板斧,在AI时代行不通了
前端·后端·团队管理
Apifox29 分钟前
Apifox 5 月更新|Postman 导入优化、Runner 支持非 root 运行、请求代码自动带鉴权
前端·后端·安全
miaowmiaow40 分钟前
PSD2Code 近期更新与深度解析:从设计稿到生产级代码的完整技术栈
前端·人工智能·ai编程
Hilaku1 小时前
多标签页并发请求导致 Token 刷新失败?只有 15行代码就能解决 !
前端·javascript·程序员
Nile1 小时前
解密Palantir系列一:4. Ontology 不是哲学
开发语言·前端·javascript
因_崔斯汀1 小时前
ECharts 区域地图可视化实战:以山东地图为例
前端
Bacon1 小时前
手摸手带你搞清楚 AI Agent 的六大核心概念
前端·人工智能
王林不想说话1 小时前
TypeScript 进阶知识总结:从 extends、泛型到 infer,一篇打通 TS 类型系统
前端·javascript·typescript
卤蛋fg61 小时前
vxe-table 实现数据分组统计与表尾合计
vue.js
罗超驿2 小时前
15.JavaScript 函数与作用域完全指南:语法、参数、表达式与作用域链实战
开发语言·前端·javascript