vue3中 <el-form-item 出现了边框怎么回事

在 Vue3 中，<el-form-item> 组件边框的显示与 CSS 相关。可能是你在组件的 CSS 样式中设置了边框的样式，也可能是使用了某个 UI 库的样式，或者是在全局 CSS 中设置了样式。

你可以通过检查组件的 CSS 样式，或者使用浏览器的开发者工具检查元素的样式来确定边框的来源，然后根据需要调整或删除相应的样式。如果你使用的是某个 UI 库，也可以参考它的文档来了解如何自定义样式。

相关问题

vue3 <el-form-item <el-input 组合在一起的时候，去除掉<el-form-item的边框

可以通过以下两种方式去除`<el-form-item>`的边框：

1. 使用`slot-scope`自定义表单项的渲染方式，将`<el-input>`放在`<el-form-item>`的内部，然后设置`<el-form-item>`的`border:none`样式。

<template>
  <el-form>
    <el-form-item :label="label" :prop="prop" border:none>
      <template v-slot="{label, error}">
        <el-input :placeholder="label"></el-input>
        <div class="el-form-item__error">{{error}}</div>
      </template>
    </el-form-item>
  </el-form>
</template>

2. 使用 CSS 样式覆盖掉`<el-form-item>`的默认边框样式。

<template>
  <el-form>
    <el-form-item :label="label" :prop="prop" class="no-border">
      <el-input :placeholder="label"></el-input>
    </el-form-item>
  </el-form>
</template>

<style>
  .no-border .el-form-item__content {
    border: none;
  }
</style>

以上两种方式均可以去除`<el-form-item>`的边框。建议使用第一种方式，因为它更加灵活，可以自定义表单项的渲染方式。

.el-form-item__error挡住边框

### .el-form-item__error 遮挡表单元素边框解决方案

当遇到 `.el-form-item__error` 提示信息遮挡 Element UI 表单项边框的情况时，可以通过调整 CSS 样式来解决问题。具体方法如下：

#### 方法一：修改错误提示位置
通过增加 `margin-top` 或者其他定位属性使错误消息不覆盖输入框。

.el-form-item__error {
    margin-top: 8px;
}

这种方法简单有效，适用于大多数情况[^1]。

#### 方法二：使用样式穿透技术
对于某些更复杂的情形，可能需要利用 Vue 的深层作用选择器 `/deep/` 来确保自定义样式能够影响到子组件内部的类名。

<style scoped lang="scss">
/deep/.el-form-item__error {
    position: absolute !important;
    top: 100%;
    left: 0;
    transform: translateY(5px);
}
</style>

此方式特别适合处理由第三方UI库引入的样式冲突问题[^4]。

#### 方法三：重新设置验证信息显示模式
Element Plus 支持多种不同的反馈形式，比如顶部居中的全局弹窗或是内联提示等。如果默认底部展示的方式不合适，则可以选择更改配置项让其适应页面布局需求。

// JavaScript 方式设定 form 属性 rules 和 message-position 参数
const ruleFormRef = ref(null)

function submitForm() {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid) => {
    if (valid) console.log('submit!')
    else console.log('error submit!!')
  })
}

<template>
  <ElForm :model="form" status-icon :rules="rules" ref="ruleFormRef" label-width="120px"
          :message-position="'top'"> <!-- 更改此处 -->
      ...
  </ElForm>
</template>

上述三种策略可以根据实际应用场景灵活选用或组合应用以达到最佳效果[^3]。