element-ui 修改el-form-item样式

最新推荐文章于 2025-04-14 15:24:03 发布

小何…

最新推荐文章于 2025-04-14 15:24:03 发布

阅读量2.1k

点赞数 4

文章标签： ui vue.js elementui

本文链接：https://blog.youkuaiyun.com/m0_61601708/article/details/137075048

版权

本文详细介绍了如何使用LessCSS对ElementUIForm组件进行精细化定制，分别针对label、content、input和button这四个部分独立修改样式，以实现自定义的界面效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

form结构
修改el-form-item所有样式
只修改label
只修改content
只修改input
只修改button

form结构

<el-form :model="formData" label-width="80px">
<el-form-item label="label1">
<el-input v-model="formData.value1"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>

修改el-form-item所有样式

<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ * {
font-size: 18px;
color: blue;
}
}
}
</style>

element-ui 修改el-form-item样式

只修改label

<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ .el-form-item__label {
font-size: 18px;
color: blue;
}
}
}
</style>

element-ui 修改el-form-item样式

只修改content

<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ .el-form-item__content {
* {
font-size: 18px;
color: blue;
}
}
}
}
</style>

element-ui 修改el-form-item样式

只修改input

<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ .el-form-item__content {
input {
font-size: 18px;
color: blue;
}
}
}
}
</style>

element-ui 修改el-form-item样式

只修改button

<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ .el-form-item__content {
button {
font-size: 18px;
color: blue;
}
}
}
}
</style>

element-ui 修改el-form-item样式