Element UI中textarea组件clearable属性无效？

Question

在使用 Element UI 开发过程中，有开发者反馈：为 `` 组件设置 `clearable` 属性后，清空按钮未如预期显示或功能失效。此问题常见于对 `el-input` 组件的类型理解偏差——实际上，`clearable` 属性仅在 `type="text"` 或默认文本输入模式下有效，而 `type="textarea"` 并不支持该属性。此外，即便通过自定义方式强行添加清除功能，也可能因事件绑定或数据同步问题导致清空无效。解决思路包括：验证 input 类型、使用自定义清空按钮或改用可支持 clearable 的组件形式。

Answer 1

一、问题背景与现象描述

在使用 Element UI 进行前端开发时，有开发者反馈为 <el-input type="textarea"> 组件设置了 clearable 属性后，清空按钮未如预期显示或功能失效。

此问题常见于对 el-input 组件类型理解偏差。实际上，clearable 属性仅在 type="text" 或默认文本输入模式下有效，而 type="textarea" 并不支持该属性。

二、问题分析与定位

Element UI 的官方文档中明确指出：clearable 属性仅适用于单行输入框（即 type="text"）。对于多行输入框 type="textarea"，该属性不会生效。

以下是验证 clearable 在不同 type 下行为的代码示例：

<template>
  <div>
    <p>Text Input (Clearable):</p>
    <el-input v-model="text" clearable placeholder="请输入内容"></el-input>

    <p>Textarea (Clearable 不生效):</p>
    <el-input v-model="textarea" type="textarea" clearable placeholder="请输入内容"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      textarea: ''
    };
  }
};
</script>
  

三、解决方案探索

尽管 type="textarea" 不支持 clearable，但我们可以从以下三种方式实现类似效果：

• 验证 input 类型是否符合 clearable 支持范围
• 通过自定义清空按钮实现清除逻辑
• 改用可支持 clearable 的组件形式（如 el-input 替代方案）

四、自定义清空按钮实现方案

如果确实需要为 textarea 添加清空功能，可以手动添加一个图标按钮，并绑定清空事件。

示例如下：

<template>
  <div class="custom-textarea">
    <el-input
      v-model="textarea"
      type="textarea"
      :rows="4"
      placeholder="请输入内容"
    />
    <el-button
      v-if="textarea"
      @click="textarea = ''"
      icon="el-icon-close"
      circle
      style="position: absolute; right: 10px; bottom: 10px;"
    />
  </div>
</template>

<style scoped>
.custom-textarea {
  position: relative;
}
</style>
  

五、流程图说明

下面是处理该问题的整体流程图：

graph TD
    A[用户设置 clearable] --> B{是否为 textarea?}
    B -- 是 --> C[clearable 不生效]
    B -- 否 --> D[正常显示清空按钮]
    C --> E[手动添加清空按钮]
    E --> F[绑定清空事件并更新 v-model]

六、扩展思考：组件设计与兼容性

Element UI 的 el-input 组件本质上是对原生 HTML5 input 和 textarea 元素的封装。

其内部机制决定了某些属性（如 clearable）只能作用于特定类型的输入元素。

因此，在使用过程中应结合文档深入理解每个属性的适用范围。

Input Type	Supports clearable	Use Case
text	✅ Yes	单行文本输入
textarea	❌ No	多行文本输入

七、进阶建议：自定义组件封装

为了提高复用性和一致性，建议将上述“自定义清空按钮”逻辑封装成一个独立组件，如 CustomTextarea.vue。

这样可以在多个项目中统一使用，避免重复开发。

例如：

// CustomTextarea.vue
<template>
  <div class="custom-textarea">
    <el-input
      v-model="value"
      type="textarea"
      :rows="rows"
      :placeholder="placeholder"
    />
    <el-button
      v-if="value"
      @click="value = ''"
      icon="el-icon-close"
      circle
      style="position: absolute; right: 10px; bottom: 10px;"
    />
  </div>
</template>

<script>
export default {
  props: ['value', 'rows', 'placeholder'],
  model: {
    prop: 'value',
    event: 'input'
  }
};
</script>