鍍金池/ 問答/HTML/ 如何讓Select的field編輯的時候直接展示為它有的值?

如何讓Select的field編輯的時候直接展示為它有的值?

圖片描述

這個是我的Modal,我使用的是iView:

<Modal
      v-model="model"
      title="實體服務(wù)器配置設(shè)置"
      @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="服務(wù)器名稱" 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="內(nèi)存" 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="服務(wù)器狀態(tài)" prop="server_status">

          <Select v-model="addform.server_status" placeholder="狀態(tài)選擇" 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>
回答
編輯回答
笑浮塵

Select 沒有v-modal? vue是數(shù)據(jù)驅(qū)動,是雙向綁定

2018年1月16日 03:26
編輯回答
鹿惑

原生select ?

判斷一下哪個是當前選中的 在節(jié)點里 添加 selected = "selected"

2017年4月10日 16:20
編輯回答
離夢

拿內(nèi)存的第一個select來說,它的顯示值是綁定在v-model上的,你得指定

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

使用v-for僅僅是渲染出多個option,并沒有綁定select的值

2018年8月21日 22:15