elementui的select组件下的option的值为对象的解决

2,364 阅读1分钟

elementui的select踩过的坑

在项目中用到了下图的组件,选中之后还会有展示,

这时候我选中的option的value为对象,代码如下

<el-select
        v-model="caseKeyword"
        filterable
        clearable
        value-key="title"
        placeholder="请先输入用例集/用例库名称"
        style="width: 280px;margin-bottom: 12px;"
        @change="caseHandleSelect"
        @focus="caseQuerySearch">
        <el-option-group
            v-for="(group,index) in caseName"
            :key="index"
            :label="group.label">
            <el-option
                v-for="item in group.options"
                :key="item.title"
                :label="item.name"
                :value="item"/>
        </el-option-group>
    </el-select>

我的:value:"item" 中的item为对象,这时候就需要在select上使用value-key这个属性了,element官网有介绍,用来标识你选中的对象的,值为字符串,和你的el-option绑定的key值相同,这样就解决了。

注意

value-key绑定的字符和:key绑定的对象属性一样,且是唯一标识