el-input 设为只读

在Element UI的`el-input`组件中，如果你想让它变成只读状态，即不允许用户编辑输入内容，可以设置其`disabled`属性为`true`。以下是基本的实现步骤：

<el-input type="text" value="这是一个只读输入框" :disabled="isReadOnly"></el-input>

在Vue的实例中，你可以通过数据驱动的方式控制`disabled`属性的状态：

<template>
  <el-input type="text" :value="displayText" :disabled="isDisabled" />
</template>

<script>
export default {
  data() {
    return {
      displayText: '这是一个只读输入框',
      isDisabled: false, // 初始设置为false，允许编辑
    };
  },
  // 如果你想切换到只读模式，可以在某个函数中更新isDisabled变量
  methods: {
    setToReadonly() {
      this.isDisabled = true;
    },
    // 同样也可以提供一个方法去重置回可编辑状态
    resetToEditable() {
      this.isDisabled = false;
    },
  },
};
</script>

在这个例子中，当你调用`setToReadonly()`方法时，输入框就会变为只读状态。要重新启用编辑，只需调用`resetToEditable()`方法即可。