美文网首页前端
element-ui select value-key踩坑记录

element-ui select value-key踩坑记录

作者: 小蝴蝶_037a | 来源:发表于2018-10-16 17:55 被阅读0次

    如官方文档所说 ,

    value-key 作为 value 唯一标识的键名,绑定值为对象类型时必填   类型为string    默认值为value

    element-ui官方文档


    <el-select size="small" class="fours" placeholder="请选择品牌" v-model="girard" value-key="name" :disabled="isDaPin">

                                            <el-option v-for="(item,index) in brandsSel" :value="item" :label="item.name" :key="item.id">

                                                    <span style="float: left; ">@{{item.name}}</span>                                        </el-option>

                                        </el-select>


    js:
    girard:{"id":value,"name":res.content[value][0],'daPin':res.content[value][1]}

    //这里根据接口获取


    使用场景 :当select进页面时需要赋值 并且label和key不一致的时候用,浅显的说进入页面要求是展示name,修改后传name对应的id给后端:

    person:{

    id:1,

    name:'小明'

    }

    这个时候需要用到value-key  并且要与v-model  ,:value, :label,:key 配合使用


    坑:不太清楚为什么 value-key = id 渲染不成功  value-key = name时就成功了呢   :)

    select 刚刚发现有更简单的赋值方法  跟着文档的代码只要你设的v-model="girard"里的girard和下面v-for里的:value一致就行了  ,不需要那么多弯弯绕 :)

    相关文章

      网友评论

        本文标题:element-ui select value-key踩坑记录

        本文链接:https://www.haomeiwen.com/subject/pxohzftx.html