el-form的label-width固定宽度,右边el-form-item__content根据浏览器自适应

你可以将 `label-width` 属性设置为固定宽度，例如 `label-width: 100px;`。然后给 `el-form-item__content` 设置 `width: calc(100% - 100px);`，这样就可以让 `el-form-item__content` 根据浏览器自适应了。

示例代码如下：

<el-form label-width="100px">
  <el-form-item label="用户名">
    <el-input v-model="username"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input type="password" v-model="password"></el-input>
  </el-form-item>
</el-form>

.el-form-item__content {
  width: calc(100% - 100px);
}

相关问题

element-ui里的el-form的label-width自适应宽度

在 Element UI 中，`el-form` 组件的 `label-width` 属性可以设置标签宽度。如果设置为固定宽度，例如 `label-width="100px"`，则所有标签的宽度都会被限制为 `100px`。如果想要让标签宽度自适应，可以将 `label-width` 设置为 `auto`，然后为每个表单项设置不同的标签宽度，例如：

<el-form label-width="auto">
  <el-form-item label="姓名" :label-width="80">
    <el-input></el-input>
  </el-form-item>
  <el-form-item label="电话" :label-width="60">
    <el-input></el-input>
  </el-form-item>
  <el-form-item label="邮箱" :label-width="40%">
    <el-input></el-input>
  </el-form-item>
</el-form>

这样就可以实现标签宽度自适应的效果了。需要注意的是，当标签宽度设置为百分比时，它会基于父元素的宽度进行计算。因此，如果父元素的宽度不确定，可能会导致标签宽度不准确。

el-form-item__content自适应

要使 `el-form-item__content` 自适应，您可以尝试以下几个步骤：

1. 将 `el-form-item` 的 `label-width` 属性设置为 `0px`

<el-form-item label="Label" label-width="0px">
  <el-input></el-input>
</el-form-item>

2. 使用 `flex` 布局来使 `el-form-item__content` 自适应

<el-form-item label="Label" label-width="0px">
  <div style="display: flex; flex-direction: column;">
    <el-input></el-input>
  </div>
</el-form-item>

3. 如果您希望 `el-form-item__content` 的宽度与其父元素相同，则可以将 `el-form-item` 的 `prop` 属性设置为 `''`，并使用 `width: 100%` 来使其充满整个父元素。

<el-form-item label="Label" label-width="0px" prop="">
  <div style="width: 100%;">
    <el-input></el-input>
  </div>
</el-form-item>