我们再真实的项目中，当我们通过el-select选择一个下拉选项时，除非是我们从新做了一次新的选择，不管什么情况都会显示我们选中的选项。可显示情况是当我们刷新页面、或者跳转到其他页面后又重新返回，我们之前的所选 的选项就被清空了。为了避免这个情况我们可以再选择的时候绑定一个change事件，每选择一次的时候就会返回一个我们所选择的value值，而我们只需要把这个返回的value通过sessionStorage保存在本地，拿的时候在从sessionStorage中取,如下：
<el-select v-model="value" placeholder="请选择" size="small" @change="sendSelectCompanyId">
<el-option v-for="item in allCompanyname" :key="item.coid" :label="item.companyname" :value="item.coid"></el-option>
</el-select>
<script>
export default {
data() {
return {
value:sessionStorage.getItem("selectCompanyId") ||'',
}
},
methods:{
sendSelectCompanyId(value){
//保存我们所选的value
sessionStorage.setItem('selectCompanyId',value)
},
}
}
</script>
从逻辑上讲，这完全是没问题的，可现实是，当我们刷新的时候看到的竟是我们返回的value值而不是对应的label值，这是什么回事呢？原来是我们从后端那到coid是数字类型，我们把这个coid赋值给了组件的value，正常情况是这个是没问题的，但是，当我们通sessionStorage保存和读取的时候，我们拿到coid的类型就该变了，由原来的数字类型变为字符串类型，所以当我们刷新页面看到的只是数字，而不是我们需要的label。
那如何解决这个问题呢？
知道了原因解决起来也很简单，只要把我们从本地拿到的字符串转换为数字就可以了，如：
data() {
return {
value:Number(sessionStorage.getItem("selectCompanyId") ) || ' ',
}
}
