el-form如何设置边框

要设置 el-form 的边框，可以使用 el-form 的 border 属性。将其设置为 true 即可显示边框。

例如：

<el-form :border="true">
  <!-- 表单内容 -->
</el-form>

此外，还可以通过设置 el-form 的 style 属性来自定义边框样式，例如：

<el-form style="border: 1px solid #ccc; padding: 10px;">
  <!-- 表单内容 -->
</el-form>

这样就可以设置 el-form 的边框为 1 像素的实线边框，颜色为 #ccc，同时设置表单的内边距为 10 像素。

相关问题

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

可以通过设置`border`属性为`false`来去除`<el-form-item>`的边框，同时设置`border`属性为`false`也会影响到内部的`<el-input>`元素。

例如：

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

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>`的边框。建议使用第一种方式，因为它更加灵活，可以自定义表单项的渲染方式。