iView Select组件相关问题总结（回显、默认值等）

项目场景：

使用iView Select组件时，需要实现编辑修改原始数据的功能。

实现步骤：

1. 通过选中权限ID查询其相应的数据，如权限等级、父权限、名称等；
2. 通过v-model将数据进行双向绑定，实现数据回显；
3. 修改后，提交。

---

问题描述

一级权限应当有默认值而没有被渲染出来，如图所示。权限等级这里也是通过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))

实现效果如下：

最后附上一下午的的搜索查看的记录，呜呜呜！！！