Element UI el-select 远程搜索第一次搜索记录，点击后,再次获取焦点的时候可以保留上次选择的记录吗？

Vue el-select 远程搜索第一次搜索记录，点击后,再次获取焦点的时候可以保留上次选择的记录吗？

例如
我选择了以下内容

再次点击 el-select选择框
就变成了这种

而我想要实现输入框可以继续编辑修改原来选择的文字内容,而不是将原来的内容变为提示

你可以自己在el-select的基础实现这个功能加一个keyup事件然后自己在keyup做搜索

不是应该看远程搜索的内容吗

可以的 , 这里需要后端配合你实现, 如果你是自己练习的话, 那么比较复杂 , 你可以通过vuex 来进行数据存储 ,如有帮助给个采纳谢谢

不知道你这个问题是否已经解决, 如果还没有解决的话:

这个问题的回答你可以参考下: https://ask.csdn.net/questions/7764373
你也可以参考下这篇文章：解决element-ui中的el-select选择器无法显示选中内容的问题

除此之外, 这篇博客: element UI-远程搜索（el-select）中的 3.后端返回结果示例 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

{errorList:[]
serviceNode:""
shardFlag:false
storageMap:{}
tradeMap:{
    message:"查询成功"
    resultCode:"00"
    comCode:["01,北京分公司", "02,湖北分公司", "0201,湖北分公司宜昌中心"]
}}

您还可以看一下徐杨老师的ElementUI入门到实战教程课程中的 select选择器以及级联选择器小节, 巩固相关知识点

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

单选吗，可以用el-autocomplete

需要在el-select组件上添加reserve-keyword属性，并设置为true，这样可以保留上次选择的记录

你的意思是说想再次点击获取焦点的时候不要弹出条目，可以重新输入值？

你重新赋下值试试？

你在聚焦的时候判断一次选择框是否已经选择了，如果没有选择，那你就讲下拉框的数组置空。

要实现这个效果。不难的哇，你只要将上次搜索的结果存储起来，一般存储在前端即可，然后你再次点击搜索的时候，把那个值拿出来放到搜索框中就可以了。

发来我看

methods: {
  searchRecords() {
    // 获取上一次选择的记录
    const selectedRecord = this.selectedRecord;
    // 清空选择记录
    this.selectedRecord = null;
    // 模拟远程搜索数据
    this.records = [
      { id: 1, name: 'Option 1' },
      { id: 2, name: 'Option 2' },
      { id: 3, name: 'Option 3' },
      { id: 4, name: 'Option 4' },
      { id: 5, name: 'Option 5' },
    ];
    // 设置 search 方法的参数为当前选择记录
    this.search(selectedRecord);
  },
  search(selectedRecord) {
    // 模拟远程搜索数据
    this.records = [
      { id: 1, name: 'Option 1' },
      { id: 2, name: 'Option 2' },
      { id: 3, name: 'Option 3' },
      { id: 4, name: 'Option 4' },
      { id: 5, name: 'Option 5' },
    ];
    // 如果传入的参数为 null，则清空选择记录
    if (selectedRecord === null) {
      this.selectedRecord = null;
    } else {
      // 如果传入的参数不为空，则将其保存到 selectedRecord 中
      this.selectedRecord = selectedRecord;
    }
  },
}

怎么发给你源代码

要实现在 Element UI 的 el-select 组件中远程搜索后保留上次选择的记录，并且在再次获取焦点时允许编辑修改原来选择的文字内容，你可以通过以下步骤来实现：

在 Vue 组件中，定义一个变量 selectedValue 来保存选择的值，并将其初始化为空。


javascript
data() {
  return {
    selectedValue: ''
  };
}

在 el-select 组件中，绑定 v-model 到 selectedValue 变量，并设置 filterable 属性为 true。


html
<el-select v-model="selectedValue" filterable>
  <!-- 远程搜索的选项 -->
</el-select>

为了实现再次点击 el-select 时不清空输入框内容，你需要使用 change 事件来监听选择的变化，并在选择变化时更新 selectedValue 的值。


html
<el-select v-model="selectedValue" filterable @change="updateSelected">
  <!-- 远程搜索的选项 -->
</el-select>
javascript
methods: {
  updateSelected(value) {
    this.selectedValue = value;
  }
}

通过以上步骤，当你选择一个选项后，再次点击 el-select 时，输入框会显示你之前选择的内容，而不是清空或变为提示。你可以继续编辑修改原来选择的内容。

提供两种方式给你试试：
1、第一次搜索的时候，使用一个全局变量保存当前这次的搜索内容，下一次点击搜索时候，先把全局变量中的内容赋值到输入框里面。
2、自定义一个远程搜索组件，在组件中保存每一次的搜索内容，下一次搜索时候，接着前一次内容进行输入。