Element 踩坑--value和label赋值不一致，分别为id,name，传入id时，不会显示该id对应的值

需求是这样的，我要在添加产品成功之后，带着产品类别的catId跳转到产品页面以查询此类别下的产品，这不是很简单吗，不是传进来就行了吗，OK，我们来look一look

<template>
<el-select
	@change="cateOneChange"
	v-model="catId"
	:placeholder="defaultClassOneName"
	size="mini"
	class="class-one-two"
>
    <el-option
    	v-for="item in categoryClassOneList"
        :key="item.catId"
        :label="item.catName"
        :value="item.catId"
	></el-option>
</el-select>
</template>
<script>
	export default{
		data(){
			return:{
				catId:'',
				categoryClassOneList:[
					{
						catId:280,
						catName:"戒指",
					},
					{
						catId:282,
						catName:"吊坠",
					},
					{
						catId:289,
						catName:"帽子",
					}
				]
			}
		},
		created(){
			//在这里接收上一个页面传进来的id
			this.catIdOne=this.$route.query.id; //289
		}
	}
</script>

OK，十分自信地打开浏览器…见证奇迹…

？？？282？什么鬼，我的吊坠呢，为什么不是显示我的吊坠，为什么是282
我不要！！！我要的是吊坠！！！
于是我开始了各种某度…
尝试了半小时…无果…人生就是这么的起起落落落落落落落落落落…
随后，放弃自我治疗的我把魔爪伸向了我的前辈大佬…哦不，是请求他的援助之手
真相逐渐浮出水面…
哎，原来是数据类型作的妖
在this.$route.query.id接收到的是字符串，而上面value绑定的是数字类型，在这里数据类型要求比较严格
相当于“282”===282 为false，所以没有找到对应的吊坠
转换一下数据类型吧

created(){
			//在这里接收上一个页面传进来的id
			this.catIdOne=Number(this.$route.query.id) //289
		}

于是，我的吊坠出来了，这次终于没有扑街了…