element ui下拉框设置默认值_vue element-ui select下拉选择的使用 设置下拉选择默认值...

START

o(╥﹏╥)o

这几天一直做表单提交，涉及到下拉选择的使用

在编辑操作的时候需要根据父组件数据，初始化下拉选择的默认选中

但是下拉选择的值 value 初始化好了，但是显示的选项却不是label 而是 value

问题原因

核对了代码很久，终于找到问题原因，这里先解释一下原因，后续再上代码，方便不会使用下拉选择的人直接cv使用。

双向绑定的 value 必须全等于 option中的 value

我当时的情况是，value的值是相等的，value的变量类型却不一样

导致 =》显示的选项不是label 而是 value

偷偷吐槽一下，数据类型，这种低级问题，下次不要再犯啦。

简单的使用案例

饿了么ui选择器初始化值案例

开始赋值

v-model="value"

placeholder="请选择产品大类"

style="width: 100%"

filterable

>

v-for="item in options"

:key="item.pcode"

:label="item.pname"

:value="item.pcode"

/>

export default {

name: "HelloWorld",

created() {

// 这里可以用于获取父组件的表单数据

// this.value = 10; // options中是字符串类型，设置为数字类型时，就会出现我START说的那种问题.

this.value = "10";

},

data() {

return {

value: "",

options:[]

};

},

methods: {

// 我这里是demo，所以写的是点击事件，直接写个调用获取选项的接口即可，效果是一样的。

up() {

this. options= [

{

pcode: "10",

pname: "黄金糕",

},

{

pcode: "100",

pname: "双皮奶",

},

{

pcode: "1000",

pname: "蚵仔煎",

},

{

pcode: "10000",

pname: "龙须面",

},

{

pcode: "100000",

pname: "北京烤鸭",

},

]

},

},

};

总结

设置下拉选择默认值

如果下拉选择的项是已知的，需要初始化下拉选择，并选中已知的值，简单来说就是设置下拉选择默认值

在created中(其他地方也可以，看情况而定) ，设置组件el-select 绑定的变量value的值,即可 ；

再设置下拉选择循环的变量options的值,即可；

其实下拉框用法很简单，这只是一个很简单的组件，CV即可

END

就到这里啦，不多逼逼了。

ku.gif