使用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;
	    }
	}
}
相关推荐
C_心欲无痕7 小时前
前端实现水印的两种方式:SVG 与 Canvas
前端·安全·水印
尾善爱看海9 小时前
不常用的浏览器 API —— Web Speech
前端
美酒没故事°10 小时前
vue3拖拽+粘贴的综合上传器
前端·javascript·typescript
jingling55511 小时前
css进阶 | 实现罐子中的水流搅拌效果
前端·css
zhengxianyi51512 小时前
只需3句让Vue3 打包部署后通过修改配置文件修改全局变量——实时生效
vue.js·前后端分离·数据大屏·ruoyi-vue-pro优化
悟能不能悟13 小时前
前端上载文件时,上载多个文件,但是一个一个调用接口,怎么实现
前端
可问春风_ren13 小时前
前端文件上传详细解析
前端·ecmascript·reactjs·js
羊小猪~~14 小时前
【QT】--文件操作
前端·数据库·c++·后端·qt·qt6.3
晚风资源组15 小时前
CSS文字和图片在容器内垂直居中的简单方法
前端·css·css3
Miketutu15 小时前
Flutter学习 - 组件通信与网络请求Dio
开发语言·前端·javascript