el-select の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+el-select へ行く。
• +Vue+el-select の差分を削除

#author("2022-06-30T16:27:35+08:00","default:Admin","Admin")
#author("2022-06-30T16:30:27+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents


* el-option [#uf55ed95]

|参数|说明|类型|可选值|默认值|
|value|选项的值|string/number/object|—|—|
|label|选项的标签，若不设置则默认与value相同|string/number|—|—|
|disabled|是否禁用该选项|boolean|—|FALSE|


#codeprettify{{
<template>
  <div>
    <el-button @click="printSelect">调试</el-button>
    //value1 的类型 需要跟:value="item.value" 一样
    <el-select ref="selectValue1" v-model="value1" filterable placeholder="请选择">
      <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      //vaule1 为string 则 value="选项6" 前面可以不用加：即v-bind 数据绑定
      <el-option key="选项6" label="扬州炒饭" value="选项6" />
    </el-select>
    <el-select ref="selectValue2" v-model="value2" no-match-text filterable placeholder="请选择">
      //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