输入框禁止输入但可以选择

前言

使用element框架开发后台管理系统时遇到一个问题，一个输入框不想用户输入内容，希望用户点击输入框后向后台发送一个请求，将请求回来的数据展示到树形组件中，用户点击树形结构中的节点可以将选中的值显示到输入框中。

一、需求

输入框只读，用户选择后将值显示到输入框内。在这里插入图片描述

二、解决方案

1.方案一

给input输入框添加固有属性readonly即可，看了MDN介绍后，可以知道给输入框设置这个属性后，输入框就成为只读状态了，完美解决该问题。代码如下（示例）：

<el-form-item label="部门" prop="departmentName">
    <el-input v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" readonly />
</el-form-item>
复制代码

2.方案二

将input输入框的v-model双向绑定数据改为:value，这样操作后，就不会监测到输入框的input事件了，也达到了只读的效果。代码如下（示例）：

<el-form-item label="部门" prop="departmentName">
    <el-input :value="formData.departmentName" style="width:50%" placeholder="请选择部门" readonly />
</el-form-item>