问题
最近在做项目时遇到一个问题,使用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;
}
}
}