How to make the field of Select be directly displayed as the value it has when editing?

this is my Modal,. I use 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:-sharpccc"></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>
Apr.03,2021

Select does not have vmurmod? Vue is data-driven and bidirectional binding


Native select?

determine which is currently selected. Add selected = "selected"

to the node.

take the first select in memory. Its display value is bound to v-model. You have to specify

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

using v-for simply renders multiple option, and does not bind select values

Menu