vue element-ui select 远程搜索选择器的label值显示成value值的问题

最新推荐文章于 2026-06-04 12:50:41 发布

原创最新推荐文章于 2026-06-04 12:50:41 发布 · 3.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #element #版本问题

java web开发同时被 3 个专栏收录

1 篇文章

订阅专栏

element

1 篇文章

订阅专栏

vue.js

1 篇文章

订阅专栏

在使用Element UI的远程搜索多选选择器时，遇到一个bug：当选择第二个选项时，第一个选项的label值被替换成了value值。经排查，该问题与Element版本有关，将2.11.0版本降级到2.0.11即可解决此问题。

今天碰到一个很奇怪的bug，用element的远程搜索多选选择器时，选完了前面的，能够显示label绑定的值，选择器绑定的值也记录下了value的值，但是在模糊查询并且选择第二个选择的时候，第一个显示的label值会变成显示value值

下面是HTML代码

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.11.0/lib/index.js"></script>
<div id="app">
<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
</div>

下面是JavaScript代码

var Main = {
    data() {
      return {
        options: [],
        value: [],
        list: [],
        loading: false,
        states: [
          {
            userId: 1,
            userName: 'xx'
          },
          {
            userId: 2,
            userName: 'yy'
          }
        ]
      }
    },
    mounted() {
      this.list = this.states.map(item => {
        return { value: item.userId, label: item.userName };
      });
      console.log(this.list)
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

然后下面是输入第一个选择的时候的情况，第一个名字显示正常，为’xx’
输入第一个选择，显示正常
然后接下来输入多选的第二个选择
选了第二个选择的显示
第二个选择的名字显示是正常的，但是第一个选择理应显示label值的，但是他变成了显示value的值
很奇怪，找了很久，最后发现是element版本问题。

把2.11.0版本改成2.0.11版本就可以了

<script src="//unpkg.com/element-ui@2.11.0/lib/index.js"></script>

<script src="//unpkg.com/element-ui@2.0.11/lib/index.js"></script>

以下是改了之后的正常情况
正常情况的多选
所以element更新了新版本还有bug，希望看到的同志别踩坑太久