巧用 CSS 重置 Element UI 中 el-form-item 的 label 宽度

2024-02-03 07:10:27

Element UI 02 - 巧用 CSS 重置 el-form-item 的 label 宽度

前言

在使用 Element UI 时，常常会遇到这样的问题：在一行中排列多个 el-form-item 时，如果其中某个 el-form-item 的标签（label）过于繁琐，则页面显示的结果会不美观，导致布局混乱。本文将探讨如何巧妙利用 CSS 重置 el-form-item 的 label 宽度，从而解决这一问题。

CSS 解决方法

Element UI 提供了一个内联类 el-form-item__label，该类用于控制 label 的宽度。我们可以通过覆盖此类来重置 label 宽度，使其符合我们的要求。

/* 重置 label 宽度为 100px */
.el-form-item__label {
  width: 100px !important;
}

在样式表中添加以上 CSS 代码后，所有 el-form-item 的 label 宽度都将被重置为 100px。此时，即使其中某个 el-form-item 的标签过于繁琐，页面显示的结果也不会受到影响，布局将保持美观。

示例代码

下面是一个使用 CSS 重置 label 宽度的示例代码：

<template>
  <el-form>
    <el-form-item label="姓名">
      <el-input v-model="name"></el-input>
    </el-form-item>
    <el-form-item label="电话号码">
      <el-input v-model="phone"></el-input>
    </el-form-item>
    <el-form-item label="详细地址">
      <el-input v-model="address"></el-input>
    </el-form-item>
  </el-form>
</template>

<style>
  .el-form-item__label {
    width: 100px !important;
  }
</style>