首页 > 网络编程 > JavaScript > javascript技巧 > el-select值不匹配导致回显id

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

2024-09-10 12:00:33 作者：rambler_wang

el-select数据的回显是根据id去匹配值的,最近项目出现了回显id的情况,一查是没有匹配数据的问题,于是就想怎么处理（针对单选的情况）,本文小编给大家介绍了用修改源码来解决el-select值不匹配导致回显id的问题,需要的朋友可以参考下

背景介绍

基于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了

带来的问题

得让后端把值回传，不然你不知道defaultvalue的值
每次clear下拉数据的时候也会回显defaultvalue,需要添加clear的回调，将defaultvalu设为""
源码的修改是直接写在main里面的，如果项目三方包是私有化的可以直接改源码用，如果不是建议用patch-package打补丁

以上就是修改源码来解决el-select值不匹配导致回显id的问题的详细内容，更多关于el-select值不匹配导致回显id的资料请关注脚本之家其它相关文章！