<el-form-item <el-input 在一起的时候，为什么<el-form-item也弄出了一个边框

`<el-form-item>` 组件是 Element UI 中表单的一个项，用于包装表单元素并提供一些辅助功能，如标签、描述、错误提示等。而 `<el-input>` 是 Element UI 中的输入框组件，用于接收用户的输入。

当你将 `<el-input>` 放置在 `<el-form-item>` 中时，`<el-form-item>` 组件会自动将其包装为一个表单项，为其添加标签、描述、错误提示等。同时，`<el-form-item>` 也会为其添加一个边框，以便于区分不同的表单项。

如果你不想要这个边框，可以使用 `:border="false"` 属性来禁用它，例如：

<el-form-item label="用户名" :border="false">
  <el-input v-model="username"></el-input>
</el-form-item>

这样就可以去掉输入框外部的边框了。

相关问题

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 <el-input 在一起的时候 设置<el-form-item border=false没有作用

如果您想要在 `<el-input>` 和 `<el-form-item>` 之间移除边框，您可以使用 `<el-form>` 的 `:border` 属性来控制整个表单的边框显示。

示例代码如下：

<template>
  <el-form :border="false">
    <el-form-item>
      <el-input placeholder="请输入内容"></el-input>
    </el-form-item>
  </el-form>
</template>

如果您需要更细粒度地控制 `<el-form-item>` 的边框显示，可以尝试使用 CSS 来设置边框样式，如下所示：

<template>
  <el-form>
    <el-form-item class="no-border">
      <el-input placeholder="请输入内容"></el-input>
    </el-form-item>
  </el-form>
</template>

<style scoped>
.no-border {
  border: none;
}
</style>

这样就可以移除 `<el-form-item>` 的边框了。