修改源码来解决el-select值不匹配导致回显id的问题_Javascript

背景介绍

基于vue2+element

el-select数据的回显是根据id去匹配值的，最近项目出现了回显id的情况，一查是没有匹配数据的问题，于是就想怎么处理（针对单选的情况）

实现思路

有下面两个方案

获取完值和下拉数据后，通过方法遍历有没有匹配id的选项，没有就强塞一个选项进去，然后回显
改源码，看能不能直接回显，不然来一个就得处理一次，很麻烦

具体实现

没有数据就塞数据

setdata(list, id, name) {
    let item = list.some(item => item.id === id)
    if (item) {
      list.push({
        id: id,
        name: name
      })
    }
}

实现比较简单，就不多说了

改源码，一次搞定

先看源码，看为什么会回显id,如下

getoption(value) {
    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 = this.cachedoptions.length - 1; i >= 0; i--) {
      const cachedoption = this.cachedoptions[i];
      const isequal = isobject
        ? getvaluebypath(cachedoption.value, this.valuekey) === getvaluebypath(value, this.valuekey)
        : cachedoption.value === value;
      if (isequal) {
        option = cachedoption;
        break;
      }
    }
    if (option) return option;
    const label = (!isobject && !isnull && !isundefined)
      ? string(value) : '';
    let newoption = {
      value: value,
      currentlabel: label
    };
    if (this.multiple) {
      newoption.hitstate = false;
    }
    return newoption;
  }

可以看到，第17、18行，如果有匹配的值，就返回值，如果没有匹配上，就返回string(value),也就是id
要想回显值，就得把这行改掉，计划将20行的newoption改为这个；其中defaultvalue就是我们希望回显的值

let newoption = {
    value: value,
    currentlabel: this.defaultvalue || label
};

上面用了一个defaultvalue的prop,通过mixin添加defaultvalue

写一个element-mixin.js

export default elementui => {
    elementui.select.mixins[elementui.select.mixins.length] = {
        props: {
            defaultvalue: {
                type: string || number,
                default: ''
            }
        },
    }
}

在main.js里面把mixin加上,源码getoption的修改也写这里

import elementui from 'element-ui'
import addselectdefaultvalue from './mixins/addselectdefaultvalue'
elementui.select.methods.getoption = function (value) {
  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 = this.cachedoptions.length - 1; i >= 0; i--) {
    const cachedoption = this.cachedoptions[i];
    const isequal = isobject
      ? getvaluebypath(cachedoption.value, this.valuekey) === getvaluebypath(value, this.valuekey)
      : cachedoption.value === value;
    if (isequal) {
      option = cachedoption;
      break;
    }
  }
  if (option) return option;
  const label = (!isobject && !isnull && !isundefined)
    ? string(value) : '';
  let newoption = {
    value: value,
    currentlabel: this.defaultvalue || label
  };
  if (this.multiple) {
    newoption.hitstate = false;
  }
  return newoption;
}
addselectdefaultvalue(elementui)

-界面使用的时候添加一个default的值就可以了

<el-select v-model="value" clearable placeholder="请选择">
    <el-option 
        v-for="item in options" 
        :key="item.value" 
        :label="item.label" 
        :value="item.value"
        :defaultvalue="defaultvalue"
    >
    </el-option>
</el-select>

上面这样初次进入不匹配的时候就会显示defaultvalue的值而不是id了