切换页面保持element ui的select选择器组件的下拉框选中的数据项高亮

一、前言

实际项目（vue+element）场景是这样的：国际化的功能切换语言选用了element的select选择器组件，下拉框中是多语种的语言标志词。我想要在页面来回跳转后，打开下拉框，当前的语种标志词仍是高亮显示的，这样，在语种多的情况选择时有一个提示，会提升用户体验。

二、问题描述

假定你当前选择器默认选中“双皮奶”选项（代码见2、select组件源码），然后你通过点选，改变了选项为“黄金糕”后跳转页面，如果不改变这个value的话，再回到这个select组件页面，打开下拉框，你会发现高亮值又回到了“双皮奶”。

三、问题解析

Select组件源码

具体标签内部的属性含义建议大家还是看一下element ui官网Select选择器。我这里只介绍一下通过那个数据可以实现本次的主题。
注意最后面的那个没在options数组中的空字符串value，这个是设置默认选中值的量，是我们解决本次问题的关键。也就是讲，你如果想默认选中“双皮奶”这个选项，你就只需要把这个value给定为：value: ‘选项2’（当然，默认选中“黄金糕”同理）。

四、问题解决

现在，已经可以实现默认的选项高亮问题了。但是，为了解决本次的问题，我们需要在使用了Select选择器的组件（页面）中在重选了选项后，将当前选项（options数组中的对象元素）的value值赋给这个控制默认选中值的value（最后面的那个没在options数组中的空字符串value），一定要保持一样，并把这个记录到的数据在回到这个组件（页面）后给到这个控制默认选中并且控制高亮的value就可以了。

五、附上我的代码（js部分）

data() {
	return {
      options: [{
          value: "1",
          label: "中文"
        },{
          value: "2",
          label: "English"
        }],
      value: "1"
    }
},
mounted() {
	// 这里我为了方便起见，直接把这段代码放在这里，建议把下面的代码封装为一个函数在这个生命周期中调用。
	 let nowLanguage = localStorage.getItem("locale");
     if (nowLanguage == 'zh-hans') {
       this.value = "1";
       this.getChinese();
     } else if (nowLanguage == 'en') {
       this.value = "2";
       this.getEnglish();
     }
}