如何在Element UI的el-input组件中设置为只读但可被点击并触发自定义方法？

在Element UI的`el-input`组件中，如果你想将其设置为只读状态但仍允许用户点击并触发自定义方法，你可以通过结合`readonly`属性和事件监听来实现。以下是步骤：

1. 首先，在HTML模板中，给`el-input`添加`readonly`属性以禁止单元格编辑：

   <el-input v-model="inputValue" :readonly="isReadOnly" @click="handleInputClick"></el-input>

2. 在你的Vue实例中，创建一个布尔变量`isReadOnly`来控制输入框是否为只读，并定义一个`handleInputClick`方法，它将在点击输入框时被触发：

   data() {
     return {
       inputValue: '',
       isReadOnly: false, // 初始值为false，表示非只读状态
     };
   },
   
   methods: {
     handleInputClick() {
       if (this.isReadOnly) { // 如果是只读模式，执行自定义逻辑
         console.log('只读状态下，触发了自定义方法');
         // 这里可以调用你的自定义方法，例如修改其他数据或者执行其他操作
       }
     }
   }

当需要切换到只读模式时，更新`isReadOnly`为`true`，这样输入框就变为只读，但仍然会被点击。点击时，`handleInputClick`方法会被调用。