el-input maxlength不生效

如果你使用的是 Element UI 的 el-input 组件，它提供了 maxlength 属性用于限制输入的最大长度，但是有时候可能会出现不生效的情况。这可能是因为你的 el-input 组件被包裹在一个 el-form 组件中，el-form 组件也有一个 maxlength 属性，会覆盖 el-input 的 maxlength 属性。

解决方法有两种：

1. 将 el-input 组件放在 el-form 组件外面，这样 el-input 的 maxlength 属性就不会被覆盖。

2. 在 el-input 组件上加一个 clearable 属性，这个属性会使 el-input 组件在输入框中出现一个清空按钮，但是同时也会使 el-input 组件不受 el-form 的 maxlength 属性影响。例如：

<el-form>
  <el-form-item label="输入框">
    <el-input v-model="inputValue" clearable :maxlength="10"></el-input>
  </el-form-item>
</el-form>

以上是两种常见的解决方法，如果还没有解决你的问题，建议检查一下是否有其他地方影响了 el-input 的 maxlength 属性。

相关问题

<el-header>Header <el-button type="success">成功按钮</el-button> <el-input type="text" v-model="text" maxlength="30" show-word-limit></el-input> <el-input type="text" v-model="text" maxlength="30" show-word-limit></el-input> </el-header>更改代码使三个元素位于一行

可以使用 Flex 布局来实现这个需求。将父元素 `el-header` 的 `display` 属性设置为 `flex`，并添加 `align-items: center;` 样式可以让子元素垂直居中对齐。同时，给每个子元素添加 `flex: 1;` 样式可以让它们平分父元素的宽度，从而实现三个元素位于一行的效果。

下面是修改后的代码：

<el-header style="display: flex; align-items: center;">
  <el-button type="success" style="flex: 1;">成功按钮</el-button>
  <el-input type="text" v-model="text" maxlength="30" show-word-limit style="flex: 1;"></el-input>
  <el-input type="text" v-model="text" maxlength="30" show-word-limit style="flex: 1;"></el-input>
</el-header>

<el-form-item label="质检备注"> <el-input type="textarea" v-model="dataForm.remark" maxlength="100" placeholder="请输入内容" show-word-limit style="width: 70%;min-height: 132px;" ></el-input> </el-form-item> vue 和 element-ui实现补全修改代码，需求是代码原有基础上 将el-input最低高度为132px,这样出现一个问题需要修复，el-textarea__inner的min-height产生了冲突，需要解决，实现el-input的最低高度为132px，并且只对当前的el-textarea__inner生效，因为还有别的代码有el-textarea__inner避免冲突

可以在CSS中针对当前的el-input组件下的el-textarea__inner元素设置min-height属性。

首先，在样式表中添加以下代码：

.el-input .el-textarea__inner {
  min-height: 132px !important;
}

然后，将el-input的style属性修改为：

style="width: 70%;min-height: 132px;overflow: auto;"

这里加上了一个overflow: auto;属性，以防止内容溢出。这样就可以实现el-input的最低高度为132px，并且只对当前的el-textarea__inner生效，避免冲突。