快捷導(dǎo)航

修改源碼來解決el-select值不匹配導(dǎo)致回顯id的問題

更新時間：2024年09月10日 12:00:32 作者：rambler_wang

el-select數(shù)據(jù)的回顯是根據(jù)id去匹配值的,最近項目出現(xiàn)了回顯id的情況,一查是沒有匹配數(shù)據(jù)的問題,于是就想怎么處理（針對單選的情況）,本文小編給大家介紹了用修改源碼來解決el-select值不匹配導(dǎo)致回顯id的問題,需要的朋友可以參考下

背景介紹

基于vue2+element

el-select數(shù)據(jù)的回顯是根據(jù)id去匹配值的，最近項目出現(xiàn)了回顯id的情況，一查是沒有匹配數(shù)據(jù)的問題，于是就想怎么處理（針對單選的情況）

實現(xiàn)思路

有下面兩個方案

獲取完值和下拉數(shù)據(jù)后，通過方法遍歷有沒有匹配id的選項，沒有就強塞一個選項進去，然后回顯
改源碼，看能不能直接回顯，不然來一個就得處理一次，很麻煩

具體實現(xiàn)

沒有數(shù)據(jù)就塞數(shù)據(jù)

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

實現(xiàn)比較簡單，就不多說了

改源碼，一次搞定

先看源碼，看為什么會回顯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下拉數(shù)據(jù)的時候也會回顯defaultvalue,需要添加clear的回調(diào)，將defaultvalu設(shè)為""
源碼的修改是直接寫在main里面的，如果項目三方包是私有化的可以直接改源碼用，如果不是建議用patch-package打補丁

以上就是修改源碼來解決el-select值不匹配導(dǎo)致回顯id的問題的詳細(xì)內(nèi)容，更多關(guān)于el-select值不匹配導(dǎo)致回顯id的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: