卤煮使用vue-elementUI时使用el-select,从后台读取数据渲染el-option的value和lable,当卤煮编辑页面是需要从后台取到传给后台的value值，然后卤煮想让el-option显示的是lable值。
<el-select class="height40" v-model.number="firstStep.sceneType.mostType" placeholder="请选择大类" :disabled="isChoosen" style="margin-right:20px;" @change=" val => { changeTwo(val); } " > <el-option v-for="item in mostTypeList" :key="item.id" :label="item.dirName" :value="item.id" ></el-option> </el-select> <el-select class="height40" v-model.number="firstStep.sceneType.classification" placeholder="请选择分类" :disabled="isFirstChoosen" style="margin-right:20px;" @change=" val => { changeThree(val); } " > <el-option v-for="item in classificationList" :key="item.id" :label="item.dirName" :value="item.id" ></el-option> </el-select> <el-select class="height40" v-model.number="firstStep.sceneType.smallType" placeholder="请选择小类" :disabled="isSecondChoosen" @change=" val => { changeFour(val); } " > <el-option v-for="item in smallTypeList" :key="item.id" :label="item.dirName" :value="item.id" ></el-option> </el-select>卤煮需要的是每一个select对应下的值都匹配v-model的id值，显示为item.dirName,卤煮一开始直接存储id值传递到后台，
当从后台读取数据渲染至页面后，显示的却是id值，这与卤煮想要显示对应id值的dirName意愿不符合，所以卤煮查阅资料，
终于知道了后台返回的值与v-model的值必须为同一类型的值(String或者Number)时才能显示正确，所以卤煮在后台返回时做了类
型转化，转化为同一类型，果然就正常显示了，写此篇为了方便记忆。
/** * 场景分类第二类别 */ changeTwo(pid) { console.log(typeof pid); pid = Number(pid);这个转化是重点，转化完成之后就可正常显示 this.$api.test .getSenlist({ pid: pid }) .then(_data => { this.firstStep.sceneType.mostType = pid; this.mostTypeList.forEach(item => { if (pid == item.id) { this.selectName.splice(1, 1, item.dirName); } }); this.selectId.splice(1, 1, pid); this.classificationList = _data.data.map(item => { return { dirName: item.dirName, id: item.id }; }); this.isFirstChoosen = this.classificationList.length ? false : true; }) .catch(e => { console.log(e); }); },