element ui 只读

Element UI 提供了一种方式来控制其组件如文件上传输入框的交互性。如果你想让文件上传控件处于只读状态，不能让用户选择或编辑文件名，可以这样做[^1]：

<el-upload :action="uploadUrl" :auto-upload="false">
  <el-button :disabled="isReadOnly">选择文件</el-button>
</el-upload>

// 在 data 中定义可读状态
data() {
  return {
    isReadOnly: true, // 当设置为 true 时，按钮变为只读
  };
}

// 在适当的地方更改 isReadOnly 的值，例如在方法中
methods: {
  handleFileChange(file) {
    if (this.isReadOnly) {
      alert('当前不可修改文件名');
    } else {
      // 处理文件上传逻辑
    }
  }
}

要使整个输入框禁用（包括选择功能），则可以在模板上添加 `:disabled` 属性[^2]：

<el-input type="file" :disabled="isDisabled" placeholder="点击选择文件"></el-input>

// 同样在 data 中定义禁用状态
data() {
  return {
    isDisabled: false, // 默认不启用禁用模式
  };
}

// 当需要禁用时，设置 isDisabled 为 true
methods: {
  disableInput() {
    this.isDisabled = true;
  }

  enableInput() {
    this.isDisabled = false;
  }
}