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