Vue + element ui 实现后台数据渲染到下拉框选项中，同时将input框与下拉框联动，select选定之后，input显示对应的值-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue + element ui 实现后台数据渲染到下拉框选项中，同时将input框与下拉框联动，select选定之后，input显示对应的值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现过程：

使用element 的select以及input输入框

<el-form-item label="Mid" prop="mid">
  <el-select
    filterable
    v-model="form.mid"
    placeholder="请选择"
    >
    <el-option
      v-for="item in midList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</el-form-item>
<el-form-item label="设备类型标识" prop="type">
   <el-input
     v-model="form.type"
    placeholder="设备类型标识"
  />
</el-form-item>

在data中定义一个数组用于接收后台请求的数据

将后台数据返回到下拉框,element,vue.js

method中定义一个方法，用于请求数据

将后台数据返回到下拉框,element,vue.js

在created中实现显示：

将后台数据返回到下拉框,element,vue.js

listMidMapping为封装好的get请求

将后台数据返回到下拉框,element,vue.js

至此实现后台数据渲染到下拉框选项中，效果图：

将后台数据返回到下拉框,element,vue.js

以上借鉴于：(21条消息) Vue + element 实现动态显示后台数据到options上_LyCat_00的博客-CSDN博客_vue动态显示数据https://blog.csdn.net/weixin_43853746/article/details/119112758?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E4%B8%ADselect%E9%80%89%E6%8B%A9%E5%99%A8%E6%80%8E%E4%B9%88%E8%83%BD%E6%A0%B9%E6%8D%AE%E5%90%8E%E7%AB%AF%E8%BF%94%E5%9B%9E%E6%95%B0%E6%8D%AE%E6%98%BE%E7%A4%BA%E5%9C%A8%E4%B8%8A%E9%9D%A2&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-5-119112758.nonecase&spm=1018.2226.3001.4187

接下来实现将select与input进行联动，当select选定之后，input会自动填充

在select中添加一个点击事件

将后台数据返回到下拉框,element,vue.js