el-input设置只读 如何支持清空操作

在Element UI中的`el-input`组件设置成只读模式后，默认是不允许用户输入文本的，包括清空操作。但是，你可以通过一些技巧来模拟清空效果。一种常见的做法是，在旁边添加一个按钮或者提供一个清除事件，当点击这个按钮时，可以手动清除输入框的内容。

以下是一个简单的示例：

<template>
  <div>
    <el-input v-model="readOnlyValue" :disabled="true" placeholder="只读模式">
      <!-- 清除按钮 -->
      <button @click="clearInput">清空</button>
    </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      readOnlyValue: '',
    };
  },
  methods: {
    clearInput() {
      // 这里只是模拟清空，实际应用中可能需要根据需求清除value
      this.readOnlyValue = '';
      // 如果你希望真正移除input标签内的值，可以尝试这个（但不建议，因为这会改变DOM结构）
      // this.$refs.input.value = '';
    }
  },
};
</script>

在这个例子中，`:disabled="true"`设置了输入框为只读状态，而`clearInput`方法会在点击“清空”按钮时调用，将`readOnlyValue`字段设为空字符串。