如何让Select的field编辑的时候直接展示为它有的值？

Question

这个是我的Modal,我使用的是iView：

<Modal
      v-model="model"
      title="实体服务器配置设置"
      @on-cancel="$refs['addform'].resetFields(),isbtn=true"
      width='820px'
    >
      <Form ref="addform" :model="addform" :rules="validate_rules" :label-width="120">

        <FormItem label="机型选择" prop="physical_server_model">
          <Select v-model="addform.physical_server_model" style="width:300px">
            <Option v-for="item in servermodelList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="服务器名称" prop="name">
          <Input type="text" v-model="addform.name" style="width:300px">

          </Input>
        </FormItem>
        <FormItem label="备注/详情" prop="desc">
          <Input type="text" v-model="addform.desc" style="width:300px">

          </Input>
        </FormItem>
        <FormItem label="CPU" prop="cpu">
          <Select v-model="addform.cpu" style="width:200px" @on-select="select_cpu">
            <Option v-for="item in select_cpu_list" :value="item.name" :key="item.name">{{
              item.name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="内存" prop="ram">

          <Select ref="select_ram_type" :clearable="true" style="width:200px" @on-change="select_ram_type">
            <Option v-for="item in select_ram_list" :value="item.name" :key="item.name">{{
              item.name }}
            </Option>
          </Select>

          <Select style="width:200px" @on-change="select_ram_type_size">
            <Option v-for="item in select_ram_type_size_list" :value="item" :key="item">{{
              item }}GB
            </Option>
          </Select>

        </FormItem>
        <FormItem label="磁盘" prop="disk">

          <Select ref="select_disk_type" :clearable="true" style="width:200px" @on-change="select_disk_type">
            <Option v-for="item in select_disk_list" :value="item.name" :key="item.name">{{
              item.name }}
            </Option>
          </Select>

          <Select style="width:200px" @on-change="select_disk_type_size">
            <Option v-for="item in select_disk_type_size_list" :value="item" :key="item">{{
              item }}GB
            </Option>
          </Select>

        </FormItem>

        <FormItem label="ipmi地址" prop="ipmi_addr">
          <Input type="text" v-model="addform.ipmi_addr" style="width:300px">

          </Input>
        </FormItem>

        <FormItem label="价格" prop="price">
          <Input type="text" v-model="addform.price" style="width:300px">

          </Input>
        </FormItem>
        <FormItem label="服务器状态" prop="server_status">

          <Select v-model="addform.server_status" placeholder="状态选择" style="width:300px">
            <Option :value="item.content" :key='item.id' v-for='(item,index) in server_status'>{{item.content}}</Option>

          </Select>
        </FormItem>

        <FormItem label="机柜选择" prop="cabinet">
          <Select v-model="addform.cabinet" filterable style="width:300px">
            <Option v-for="item in cabinet" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="交换机/端口选择">
          <FormItem prop="switches" style='display: inline-block;'>
            <Select v-model="addform.switches" @on-change='switchesSelect' style="width:200px">
              <Option v-for="(item,index) in selectListdata" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem prop="switchesport" style='display: inline-block;'>
            <Select v-model="addform.switchesport" style="width:280px">
              <Option :disabled='item.is_connected !==true?false:true' v-for="item in selectListport" :value="item.id"
                      :key="item.id">
                {{ item.name }}
                <span v-if='item.is_connected !==true?false:true' style="float:right;color:#ccc">当前端口已配置</span>
              </Option>
            </Select>
            <span v-if='is_prompt' style="color: red;padding-left: 5px;">当前暂无端口选择，请先添加！</span>
          </FormItem>

        </FormItem>

      </Form>
      <div slot="footer">
        <Button v-if='!isbtn' type="warning" size="large" :loading="modal_loading" @click="mo('addform')">修改</Button>
        <Button v-if='isbtn' type="success" size="large" @click="add('addform')">添加</Button>
      </div>
    </Modal>

Answer 1

Select 没有v-modal? vue是数据驱动,是双向绑定

Answer 2

原生select ?

判断一下哪个是当前选中的 在节点里 添加 selected = "selected"

Answer 3

拿内存的第一个select来说，它的显示值是绑定在v-model上的，你得指定

<Select v-model="addform.ram" ref="select_ram_type" ></Select>

使用v-for仅仅是渲染出多个option，并没有绑定select的值