最近接手了一个后台管理项目，项目使用了Element-ui组件， 使用了Select 下拉菜单展示并选择内容，使用了cascader做级联城市选择器

看了官方文档我们知道可以使用v-model绑定数据，设置初始值/默认值

<el-form-item label="班级" prop="classId">
   <el-select v-model="form.classId" placeholder="请选择班级">
     <el-option v-for="(value) of classList" :key="value.classId" :label="value.className" :value="value.classId"></el-option>
   </el-select>
</el-form-item>

<el-form-item label="机构地址" prop="district">
   <el-cascader
       style="width: 216px;" 
       v-model="form.district"
       :options="dataDistrict"
       @change="handleChange"
     >
    </el-cascader>
</el-form-item>

问题来了，明明已经设置了v-model但是没有显示，百度发现问题在于数据类型，form.classId的值为 String ，而 el-select列表的 value 为 Number，el-cascader的value是Array，form.district却是JSON字符串，并不全等，导致无法找到对应的项，把数据类型进行转换后就能正常显示啦

知识点来自下方：

element-UI el-select 绑定对象类型，设置初始值，不能正确显示 | 李建记element-UI el-select 绑定对象类型，设置初始值，不能正确显示http://www.lijian4net.work/article/67