当前位置：首页 > 前端教程

elementui textarea

2026-01-14 20:13:53前端教程

ElementUI Textarea 组件使用指南

ElementUI 提供了 el-textarea 组件用于多行文本输入，支持常见的表单功能如禁用状态、自适应高度、最大长度限制等。

基本用法

通过 v-model 实现双向数据绑定：

<el-input
  type="textarea"
  :rows="3"
  placeholder="请输入内容"
  v-model="textareaValue">
</el-input>

禁用状态

设置 disabled 属性禁用文本域：

<el-input
  type="textarea"
  disabled
  placeholder="禁用状态"
  v-model="textareaValue">
</el-input>

自适应高度

设置 autosize 属性让文本域根据内容自动调整高度，可指定最小/最大行数：

<el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 6 }"
  v-model="textareaValue">
</el-input>

输入长度限制

通过 maxlength 和 show-word-limit 显示字数统计：

<el-input
  type="textarea"
  maxlength="200"
  show-word-limit
  v-model="textareaValue">
</el-input>

事件处理

支持常用事件如 change、focus、blur：

<el-input
  type="textarea"
  @change="handleChange"
  @focus="handleFocus"
  @blur="handleBlur"
  v-model="textareaValue">
</el-input>

自定义验证

结合表单验证规则使用：

rules: {
  textareaValue: [
    { required: true, message: '请输入内容', trigger: 'blur' },
    { min: 10, max: 200, message: '长度在 10 到 200 个字符', trigger: 'blur' }
  ]
}

样式自定义

通过 class 或内联样式修改外观：

<el-input
  type="textarea"
  class="custom-textarea"
  style="font-size: 14px"
  v-model="textareaValue">
</el-input>

与表单集成

作为 el-form-item 的子组件使用：

elementui textarea

<el-form :model="form" :rules="rules">
  <el-form-item label="备注" prop="remark">
    <el-input type="textarea" v-model="form.remark"></el-input>
  </el-form-item>
</el-form>

以上方法涵盖了 ElementUI Textarea 的常见使用场景，可根据实际需求选择合适的功能组合。