当前位置：首页 > article >正文

select 绑定一个对象

article 2025/3/4 0:38:48

背景：

select组件的使用，适用广泛的基础单选 v-model 的值为当前被选中的 el-option 的 value 属性值。但是我们这里想绑定一个对象，一个el-option对应的对象。

<el-select
v-model="state.form.modelA"
value-key="pid"

效果展示：

实现代码：

//核心代码
<el-form
        ref="ruleForm"
        :model="state.form"
        label-width="auto"
        class="form-box"
      >
        <el-form-item label="是否是模版" prop="mould">
          <el-select
            v-model="state.form.isModel"
            placeholder="请选择"
            @change="isModelChange"
          >
            <el-option label="是模版" :value="1" />
            <el-option label="不是模版" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="模版名称"
          prop="modelA"
          v-show="state.form.modelData.length > 0"
        >
          <el-select
            v-model="state.form.modelA"
            value-key="pid"
            placeholder="请选择"
            @change="modelAChange"
          >
            <el-option
              v-for="item in state.form.modelData"
              :key="item.pid"
              :label="item.name"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-form>