elementUI的el-select 默认值显示value不显示label问题

Posted 2023-03-16

参考技术A

我们再真实的项目中，当我们通过el-select选择一个下拉选项时，除非是我们从新做了一次新的选择，不管什么情况都会显示我们选中的选项。可显示情况是当我们刷新页面、或者跳转到其他页面后又重新返回，我们之前的所选 的选项就被清空了。为了避免这个情况我们可以再选择的时候绑定一个 change 事件，每选择一次的时候就会返回一个我们所选择的value值，而我们只需要把这个返回的 value 通过 sessionStorage 保存在本地，拿的时候在从 sessionStorage 中取,如下：

从逻辑上讲，这完全是没问题的，可现实是，当我们刷新的时候看到的竟是我们返回的 value 值而不是对应的 label 值，这是什么回事呢？原来是我们从后端那到 coid 是数字类型，我们把这个 coid 赋值给了组件的 value ，正常情况是这个是没问题的，但是，当我们通 sessionStorage 保存和读取的时候，我们拿到 coid 的类型就该变了，由原来的 数字类型 变为 字符串类型 ，所以当我们刷新页面看到的只是数字，而不是我们需要的 label 。

那如何解决这个问题呢？
知道了原因解决起来也很简单，只要把我们从本地拿到的字符串转换为数字就可以了，如：

elementUI el-select获取点击项的整个对象item

​
在vue2引入elementUI之后,经常会遇到此类需求,el-select获取点击项的整个对象item，而不是默认的v-model 项目

官方文档有 value-key="value" 的用法 
https://element.eleme.cn/#/zh...

 案例

<template>
  <div>
  <el-select v-model="value" value-key="value" @change="change" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="`${item.label}`"
      :value="item"><!--绑定整个对象item-->
      {{item.label}}
    </el-option>
  </el-select>
  </div>
</template>


<script>
export default {
  name: \'HelloWorld\',
  data (){
    return {
    options: [{
        value: \'选项1\',
        label: \'黄金糕\'
      }, {
        value: \'选项2\',
        label: \'双皮奶\'
      }, {
        value: \'选项3\',
        label: \'蚵仔煎\'
      }, {
        value: \'选项4\',
        label: \'龙须面\'
      }, {
        value: \'选项5\',
        label: \'北京烤鸭\'
      }],
      value: \'\'
    }
  },
  created() {

    // 初始化赋值直接 赋值整个对象
    this.value = {
        value: \'选项5\',
        label: \'北京烤鸭\'
      };

  },
  methods: {

    // chnage触发
    change(e) {
      console.log(e);// 打印整个对象 
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

​