el-select 重写（动态加载，已保存值无法回显问题）

element ui的 el-select 不满足需求，看了下源码对其中的某些方法重写

问题: 下拉选项数据为动态加载，用户之前选择了第一页之后的数据，在编辑回显时，无法显示之前的已选值

解决方案：

1. 然后el-select设置成返回已选项的对象
2. 需要保存选中项的code和name(需要和后端沟通，让他接口帮忙保存)
3. 重写el-select 的回显值方法
   下面是重写内容：

<el-select
    ref="select"
    class="load-select"
    v-model="curValue"
    :placeholder="placeholder"
    :clearable="clearable"
    :filterable="filterable"
    :multiple="multiple"
    :remote="remote"
    :remote-method="searchFn"
    :loading="loading"
    v-loadmore="LoadMore"
    @change="changeValue"
    @visible-change="visibleSelect"
    value-key="code"
  >
    <el-option
      v-for="(item, index) in optionList"
      :key="index"
      :label="item.name"
      :value="item.code"
    >
    </el-option>
  </el-select>

el-select 需要设置value-key="code"
然后el-option 需要设置 :value="item"

下面是el-select的getOption 方法重写：
我这边是直接copy 了一份源码中的方法，然后对label赋值做了修改： label = value.name || ‘’;

  getOption(value) {
    let $select: any = this.$refs.select;
    let option;
    const isObject =
      Object.prototype.toString.call(value).toLowerCase() === "[object object]";
    const isNull =
      Object.prototype.toString.call(value).toLowerCase() === "[object null]";
    const isUndefined =
      Object.prototype.toString.call(value).toLowerCase() ===
      "[object undefined]";

    for (let i = $select.cachedOptions.length - 1; i >= 0; i--) {
      const cachedOption = $select.cachedOptions[i];
      const isEqual = isObject
        ? getValueByPath(cachedOption.value, $select.valueKey) ===
          getValueByPath(value, $select.valueKey)
        : cachedOption.value === value;
      if (isEqual) {
        option = cachedOption;
        break;
      }
    }

    if (option) return option;
    //下面注释的这句是源码里本身的
	//const label = (!isObject && !isNull && !isUndefined)? value : '';
	// 重写--start
    let label = "";
    if (!isObject) {
      label = !isNull && !isUndefined ? value : "";
    } else {
      label = value.name || "";//这句就是当value 是对象时，label赋值为value.name(这个name字段名是我这边的，小伙伴们需要根据自己的字段名来修改，也可以写成变量传入)
    }
    // 重写--end

    let newOption: any = {
      value: value,
      currentLabel: label
    };
    if ($select.multiple) {
      newOption.hitState = false;
    }
    return newOption;
  }

还有最后一步，就是把这个getOption 方法覆盖掉el-select本身的这个getOption方法：
我是在mounted 方法里直接绑定到这个ref上

 mounted() {
    this.$nextTick(() => {
      let $select: any = this.$refs.select;
      $select.getOption = this.getOption;
    });
  }

以上就是我的解决方案了，有更好的方法，欢迎评论告知哈~