如何给iview的Select控件优雅的设置默认值的问题。

发布于
2017-08-23

1.使用iview的Select控件时发现并不能通过改变v-model的值来设置值。审查元素发现这个控件并非是在原生select的基础上修改的。所以如何优雅的给它赋上初始值？

html部分

<template>
    <Select v-model="model1" style="width:200px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
</template>

js部分

<script>
    export default {
        data () {
            return {
                cityList: [
                    {
                        value: 'beijing',
                        label: '北京市'
                    },
                    {
                        value: 'shanghai',
                        label: '上海市'
                    }
                ],
                model1: '默认值'
            }
        }
    }
</script>

iview vue.js

阅读 31.4k

5 个回答

Abiel

✓ 已被采纳

iview的Select控件是可以用v-model双向绑定，但是v-model中的值要与value中的值对应

也可以通过placeholder设置默认的显示文字

ANDREW

发布于
2017-10-18

更新于
2018-03-24

新手上路，请多包涵

1.给<Select>添加:label="fooLabel"
fooLabel只会在初始时生效，所以只需要在开始时初始化一下这个fooLabel
**注意：源码也强调了，初始v-model值和fooLabel最好长度相等
2.其后点击搜索得到options新增的label会自动添加，不需要再去操作fooLabel

实例：

<Select
    v-model= "newArr"
    :label= "foolabel'
    multiple
    remote
    ...
>
<Select>

//初始化fooLabel
toggleEditModal(){
    this.newArr = this.editObj.foos.map(foo=>{
        return foo.id
    })

    this.fooLabel = this.editObj.foos.map(foo=>{
        return foo.name
    })
}

附源码图
图片描述