el-input高度自适应

对于`el-input`组件，如果想要实现高度自适应的效果，可以使用`textarea`作为输入框，并设置`autosize`属性为`true`。

以下是一个示例代码：

<template>
  <el-input
    type="textarea"
    :autosize="true"
    placeholder="请输入内容"
  ></el-input>
</template>

在上述代码中，我们将`type`属性设置为`textarea`，并将`autosize`属性设置为`true`，这样就可以实现高度自适应的效果了。根据输入内容的多少，输入框的高度会自动调整。你也可以设置`minRows`和`maxRows`属性来控制输入框的最小行数和最大行数。

希望对你有帮助！如果还有其他问题，请随时问我。

相关问题

el-input宽度自适应

要让 el-input 的宽度自适应其容器的宽度，你可以使用 CSS 中的 width 属性设置为 100%。例如：

<div class="container">
  <el-input placeholder="请输入内容"></el-input>
</div>

.container {
  width: 80%; /* 设置容器的宽度 */
}

.el-input {
  width: 100%; /* 让 el-input 的宽度与容器的宽度相同 */
}

这样，el-input 就会自适应其容器的宽度了。当容器的宽度改变时，el-input 的宽度也会相应地改变。

el-input textarea 高度自适应

el-input textarea 高度自适应可以通过添加一个监听文本框内容变化的方法，并在该方法中手动计算文本框的高度来实现。具体步骤如下：

1. 在 el-input 组件中添加一个监听方法 oninput，该方法用于监听文本框内容的变化。
2. 在该方法中获取 el-input 组件中的 textarea 节点。
3. 如果获取到了 textarea 节点，先将其高度设置为自适应，然后根据内容计算高度并设置为新的高度。

以下是一个示例代码：

<template>
  <el-input
    autocomplete="off"
    type="textarea"
    :autosize="{ minRows: 3, maxRows: 10 }"
    class="no-scroll"
    ref="reviewInput"
    @input="autoAdjustReviewInput"
  ></el-input>
</template>

<script>
export default {
  methods: {
    autoAdjustReviewInput() {
      const textArea = this.$refs.reviewInput.$refs.textarea;
      if (textArea) {
        textArea.style.height = 'auto';
        textArea.style.height = `${textArea.scrollHeight}px`;
      }
    }
  }
};
</script>

在上述代码中，我们通过 `@input="autoAdjustReviewInput"` 将 `autoAdjustReviewInput` 方法绑定到 el-input 组件的输入事件上，当文本框内容发生变化时，会触发该方法，从而实现了 el-input textarea 的高度自适应。