项目场景:
使用iView Select组件时,需要实现编辑修改原始数据的功能。
实现步骤:
- 通过选中权限ID查询其相应的数据,如权限等级、父权限、名称等;
- 通过v-model将数据进行双向绑定,实现数据回显;
- 修改后,提交。
问题描述
一级权限应当有默认值而没有被渲染出来,如图所示。权限等级这里也是通过Select组件通过双向绑定实现了我们预期需要的效果,回显出了之前的数据,只有一级权限这里没有渲染出来。
代码如下:
<Modal v-model="editModel" title="修改权限相关信息" @on-ok="editInfo" @on-cancel="editModalClosed">
<Form ref="editFormRef" :model="editForm" :rules="editFormRules" :label-width="70">
<FormItem prop="level" label="权限等级">
<Select v-model="editForm.level">
<Option value="1">一级</Option>
<Option value="2">二级</Option>
</Select>
</FormItem>
<FormItem prop="parent_id" label="一级权限">
<Select v-model="editForm.parent_id">
<!-- 回显需传入number类型的ID -->
<Option :value="item.id" v-for="item in firstRights" :key="item.id">{{item.name}}</Option>
</Select>
</FormItem>
<FormItem prop="name" label="权限名称">
<Input v-model="editForm.name" clearable></Input>
</FormItem>
<FormItem prop="path" label="页面路径">
<Input v-model="editForm.path"></Input>
</FormItem>
</Form>
</Modal>
查询该条权限请求返回的数据如下图所示:
从上图我们可以发现,level和parent_id这个字段是String类型的,且打印出来显示也是String类型的
原因分析:
一级权限这里我是通过v-if将后台返回的数据渲染在Select组件中,通过去查看“firstRights”这里的数据发现,这里传入组件中的ID是int类型的,打印的数据类型是number,因此前后两个ID对不上,导致数据没有实现双向绑定,如下图所示:
解决方案:
官方给出的文档很简单,只说了这里的value可以是string也可以number,所以一开始就忽略了这里问题。
后来也是各种百度,有的解决方案就太复杂了,最后我都没采纳,最后提取了一个字眼–数据类型是否不一致,可能导致这一问题,最后发现,确实也是。
最后解决方案就是,可以在请求一级权限的时候,将ID转换为string类型的数据,也可以在请求单条数据的时候,将ID的类型设置为number。
代码如下:
console.log(res.entity.data.parent_id)
// 将父级 ID 由 String 转 Number,通过parseInt
this.editForm.parent_id = parseInt(res.entity.data.parent_id)
console.log(typeof(this.editForm.parent_id))