iview Select 远程搜索 爬坑记录

需求：在table内的一个可输入的select选择框，根据输入返回不同的结果 看起来很简单。。

 

遇到的问题参考的答案在以下链接内，基本解决了大多数问题，但是仍然有几个问题怎么都没找到解决方案。困扰了一整天终于解决。

https://blog.csdn.net/flting1017/article/details/85257815

https://run.iviewui.com/PzbC7rqa

https://www.cnblogs.com/easonw/p/10594851.html

https://juejin.im/post/5be534086fb9a049ef2615e2

https://blog.csdn.net/zeternityyt/article/details/80242490

遇到的问题

1、搜索结果返回的数据量过大，好几万条，导致网页直接崩溃，但是不能采用懒加载模式，因为用户不会上下滑动来寻找要选择的选项，只能是一直输，输入到能很轻松的看到要输入的结果

解决方案：采用远程搜索，根据输入的内容，每次返回20或者30条

{
          title: this.$t("title"),
          key: "key",
          align: "center",
          minWidth: 65,
          render: (h, params) => {
            return h(
              "Select",
              {
                props: {
                  value: params.row.key,
                  filterable: true,
                  clearable: true,
                  transfer: true,
                  remote: true,
                  placeholder: "请选择",
                  remoteMethod: e => {
                    self.queryMyList(e, params);
                  }
                },
                on: {
                  "on-change": e => {
                    params.row.key = e;
                    self.tableData[params.index] = params.row; 
                  },
                  "on-open-change": e => {
                    this.onOpenChange(e, params, this.inputItem);
                  }
                }
              },
              self.list.map(item => {
                return h("Option", {
                  props: {
                    value: item.name,
                    label: item.name    //一定要写
                  }
                });
              })
            );
          }
        },

2、当用户没有点击option，选项，而是一直将自己想要的都输入的时候，这时候失去焦点时，数据仍然为空。

解决方案：采用on-open-change。每次下拉框收起时，触发。在远程搜索时，设置一个双向绑定的变量，记住每次输入的值。然后最终下拉框收起时，这个变量保存的是用户最后输入的内容。当然，在这里需要做校验，即用户自己输入的内容不在下拉列表中，此时需要调用得到远程搜索列表的那个接口判断。具体实现

 queryMyList(e, params) {
      this.input = e;  //e是用户实时输入的数据
      if (e != "") {
        setTimeout(() => {
             //获取远程搜索列表
        }, 400);
      }
    },
   onOpenChange(e, params, input) {
      if (e == false) {
        if (input != "") {
          //判断用户最终输入的数据是否存在于下拉列表内，如果在，则可以得到这条数据
                params.row.key = 查到的数据;
                self.tableData[params.index] = params.row;
              } else {
                this.$Modal.error({
                  title:
                    "您输入的内容无匹配数据"
                });
              }
        
        } else {
          this.$Modal.error({
            title: "您输入的内容不能为空"
          });
        }
      }
    },