el-form border
时间: 2023-10-02 13:10:07 浏览: 62
要为 el-form 添加边框,你可以使用 el-form 的自定义类名属性来设置样式。在 el-form 上添加一个自定义类名,然后在 CSS 中定义该类名的样式,包括边框样式。
HTML代码示例:
```html
<el-form class="my-form" :model="form">
<!-- 表单内容 -->
</el-form>
```
CSS代码示例:
```css
.my-form {
border: 1px solid #ccc;
padding: 20px;
}
```
这样就为 el-form 添加了一个 1px 宽度、颜色为 #ccc 的边框,并设置了内边距为 20px。你可以根据需要自定义边框的样式。
相关问题
<el-form-item <el-input 在一起的时候 设置<el-form-item border=false没有作用
如果您想要在 `<el-input>` 和 `<el-form-item>` 之间移除边框,您可以使用 `<el-form>` 的 `:border` 属性来控制整个表单的边框显示。
示例代码如下:
```html
<template>
<el-form :border="false">
<el-form-item>
<el-input placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
</template>
```
如果您需要更细粒度地控制 `<el-form-item>` 的边框显示,可以尝试使用 CSS 来设置边框样式,如下所示:
```html
<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>` 的边框了。
如何给el-form增加边框
你可以通过设置 `border` 属性为 `true` 来给 `el-form` 增加边框:
```html
<el-form border>
<el-form-item label="Label">
<el-input></el-input>
</el-form-item>
</el-form>
```
另外,你也可以通过自定义样式来给 `el-form` 增加边框,例如:
```html
<el-form class="my-form">
<el-form-item label="Label">
<el-input></el-input>
</el-form-item>
</el-form>
<style>
.my-form {
border: 1px solid #ccc;
padding: 10px;
}
</style>
```
在上面的例子中,我们通过设置 `border` 样式和 `padding` 样式来给 `el-form` 增加边框效果。你可以根据自己的需要进行调整。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)