el-select
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* el-option [#uf55ed95]
|参数|说明|类型|可选值|默认值|
|value|选项的值|string/number/object|—|—|
|label|选项的标签，若不设置则默认与value相同|string/numbe...
|disabled|是否禁用该选项|boolean|—|FALSE|
#codeprettify{{
<template>
<div>
<el-button @click="printSelect">调试</el-button>
//value1 的类型 需要跟:value="item.value" 一样
<el-select ref="selectValue1" v-model="value1" filter...
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
//vaule1 为string 则 value="选项6" 前面可以不用加：...
<el-option key="选项6" label="扬州炒饭" value="选项...
</el-select>
<el-select ref="selectValue2" v-model="value2" no-mat...
//value2为number 前面需要：
<el-option key="5" label="扬州炒饭" :value="5" />
<el-option key="6" label="苏州大闸蟹" :value="6" />
</el-select>
</div>
</template>
}}
* Tips [#g72a3122]
** 显示value不显示label的问题 [#g56c087b]
一般是由于el-select里面的v-model和v-value参数的类型不同造...
#codeprettify{{
this.form.value1 = Number(this.form.value1)
this.form.value2 = String(this.form.value2)
}}
** 选中后赋值成功，但是不显示选中的值 [#kc384a02]
方法一
多层嵌套后，数据有时不同步，强制更新一下
#codeprettify{{
this.$forceUpdate()
}}
方法二
#codeprettify{{
optChange(val) {
// val 代表 value 值
if (val) {
// 操作选中值发生变化
this.$set(this.form, this.form.id, val);
} else {
this.$set(this.form, this.form.id, '');
}
},
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* el-option [#uf55ed95]
|参数|说明|类型|可选值|默认值|
|value|选项的值|string/number/object|—|—|
|label|选项的标签，若不设置则默认与value相同|string/numbe...
|disabled|是否禁用该选项|boolean|—|FALSE|
#codeprettify{{
<template>
<div>
<el-button @click="printSelect">调试</el-button>
//value1 的类型 需要跟:value="item.value" 一样
<el-select ref="selectValue1" v-model="value1" filter...
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
//vaule1 为string 则 value="选项6" 前面可以不用加：...
<el-option key="选项6" label="扬州炒饭" value="选项...
</el-select>
<el-select ref="selectValue2" v-model="value2" no-mat...
//value2为number 前面需要：
<el-option key="5" label="扬州炒饭" :value="5" />
<el-option key="6" label="苏州大闸蟹" :value="6" />
</el-select>
</div>
</template>
}}
* Tips [#g72a3122]
** 显示value不显示label的问题 [#g56c087b]
一般是由于el-select里面的v-model和v-value参数的类型不同造...
#codeprettify{{
this.form.value1 = Number(this.form.value1)
this.form.value2 = String(this.form.value2)
}}
** 选中后赋值成功，但是不显示选中的值 [#kc384a02]
方法一
多层嵌套后，数据有时不同步，强制更新一下
#codeprettify{{
this.$forceUpdate()
}}
方法二
#codeprettify{{
optChange(val) {
// val 代表 value 值
if (val) {
// 操作选中值发生变化
this.$set(this.form, this.form.id, val);
} else {
this.$set(this.form, this.form.id, '');
}
},
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
