+Vue+el-select のバックアップ(No.3)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+Vue+el-select へ行く。
- 1 (2022-05-16 (月) 14:02:10)
- 2 (2022-05-16 (月) 14:02:38)
- 3 (2022-05-28 (土) 15:37:53)

※前提条件：本文基于 Vue 2.0 创作

el-option
Tips
- 显示value不显示label的问题

el-option †[edit]

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

<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 †[edit]

↑

显示value不显示label的问题 †[edit]

一般是由于el-select里面的v-model和v-value参数的类型不同造成的，将参数类型修改一致即可

this.form.value1 = Number(this.form.value1)
this.form.value2 = String(this.form.value2)

コメント：