国产chinesehdxxxx野外,国产av无码专区亚洲av琪琪,播放男人添女人下边视频,成人国产精品一区二区免费看,chinese丰满人妻videos

ElementPlus Select 選擇器

2021-09-07 16:24 更新

Select 選擇器

當選項過多時，使用下拉菜單展示并選擇內(nèi)容。

基礎(chǔ)用法

適用廣泛的基礎(chǔ)單選

v-model的值為當前被選中的el-option的 value 屬性值

<template>
  <el-select v-model="value" placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            value: '選項1',
            label: '黃金糕',
          },
          {
            value: '選項2',
            label: '雙皮奶',
          },
          {
            value: '選項3',
            label: '蚵仔煎',
          },
          {
            value: '選項4',
            label: '龍須面',
          },
          {
            value: '選項5',
            label: '北京烤鴨',
          },
        ],
        value: '',
      }
    },
  }
</script>

有禁用選項

在el-option中，設(shè)定disabled值為 true，即可禁用該選項

<template>
  <el-select v-model="value" placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            value: '選項1',
            label: '黃金糕',
          },
          {
            value: '選項2',
            label: '雙皮奶',
            disabled: true,
          },
          {
            value: '選項3',
            label: '蚵仔煎',
          },
          {
            value: '選項4',
            label: '龍須面',
          },
          {
            value: '選項5',
            label: '北京烤鴨',
          },
        ],
        value: '',
      }
    },
  }
</script>

禁用狀態(tài)

選擇器不可用狀態(tài)

為el-select設(shè)置disabled屬性，則整個選擇器不可用

<template>
  <el-select v-model="value" disabled placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            value: '選項1',
            label: '黃金糕',
          },
          {
            value: '選項2',
            label: '雙皮奶',
          },
          {
            value: '選項3',
            label: '蚵仔煎',
          },
          {
            value: '選項4',
            label: '龍須面',
          },
          {
            value: '選項5',
            label: '北京烤鴨',
          },
        ],
        value: '',
      }
    },
  }
</script>

可清空單選

包含清空按鈕，可將選擇器清空為初始狀態(tài)


為el-select設(shè)置clearable屬性，則可將選擇器清空。需要注意的是，clearable屬性僅適用于單選。

<template>
  <el-select v-model="value" clearable placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            value: '選項1',
            label: '黃金糕',
          },
          {
            value: '選項2',
            label: '雙皮奶',
          },
          {
            value: '選項3',
            label: '蚵仔煎',
          },
          {
            value: '選項4',
            label: '龍須面',
          },
          {
            value: '選項5',
            label: '北京烤鴨',
          },
        ],
        value: '',
      }
    },
  }
</script>

基礎(chǔ)多選

適用性較廣的基礎(chǔ)多選，用 Tag 展示已選項

為el-select設(shè)置multiple屬性即可啟用多選，此時v-model的值為當前選中值所組成的數(shù)組。默認情況下選中值會以 Tag 的形式展現(xiàn)，你也可以設(shè)置collapse-tags屬性將它們合并為一段文字。

<template>
  <el-select v-model="value1" multiple placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>

  <el-select
    v-model="value2"
    multiple
    collapse-tags
    style="margin-left: 20px;"
    placeholder="請選擇"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            value: '選項1',
            label: '黃金糕',
          },
          {
            value: '選項2',
            label: '雙皮奶',
          },
          {
            value: '選項3',
            label: '蚵仔煎',
          },
          {
            value: '選項4',
            label: '龍須面',
          },
          {
            value: '選項5',
            label: '北京烤鴨',
          },
        ],
        value1: [],
        value2: [],
      }
    },
  }
</script>

自定義模板

可以自定義備選項

將自定義的 HTML 模板插入el-option的 slot 中即可。

<template>
  <el-select v-model="value" placeholder="請選擇">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <span style="float: left">{{ item.label }}</span>
      <span
        style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
        >{{ item.value }}</span
      >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        cities: [
          {
            value: 'Beijing',
            label: '北京',
          },
          {
            value: 'Shanghai',
            label: '上海',
          },
          {
            value: 'Nanjing',
            label: '南京',
          },
          {
            value: 'Chengdu',
            label: '成都',
          },
          {
            value: 'Shenzhen',
            label: '深圳',
          },
          {
            value: 'Guangzhou',
            label: '廣州',
          },
        ],
        value: '',
      }
    },
  }
</script>

分組

備選項進行分組展示

使用?el-option-group?對備選項進行分組，它的?label?屬性為分組名

<template>
  <el-select v-model="value" placeholder="請選擇">
    <el-option-group
      v-for="group in options"
      :key="group.label"
      :label="group.label"
    >
      <el-option
        v-for="item in group.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-option-group>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            label: '熱門城市',
            options: [
              {
                value: 'Shanghai',
                label: '上海',
              },
              {
                value: 'Beijing',
                label: '北京',
              },
            ],
          },
          {
            label: '城市名',
            options: [
              {
                value: 'Chengdu',
                label: '成都',
              },
              {
                value: 'Shenzhen',
                label: '深圳',
              },
              {
                value: 'Guangzhou',
                label: '廣州',
              },
              {
                value: 'Dalian',
                label: '大連',
              },
            ],
          },
        ],
        value: '',
      }
    },
  }
</script>

可搜索

可以利用搜索功能快速查找選項


為el-select添加filterable屬性即可啟用搜索功能。默認情況下，Select 會找出所有l(wèi)abel屬性包含輸入值的選項。如果希望使用其他的搜索邏輯，可以通過傳入一個filter-method來實現(xiàn)。filter-method為一個Function，它會在輸入值發(fā)生變化時調(diào)用，參數(shù)為當前輸入值。

<template>
  <el-select v-model="value" filterable placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            value: '選項1',
            label: '黃金糕',
          },
          {
            value: '選項2',
            label: '雙皮奶',
          },
          {
            value: '選項3',
            label: '蚵仔煎',
          },
          {
            value: '選項4',
            label: '龍須面',
          },
          {
            value: '選項5',
            label: '北京烤鴨',
          },
        ],
        value: '',
      }
    },
  }
</script>

遠程搜索

從服務器搜索數(shù)據(jù)，輸入關(guān)鍵字進行查找


為了啟用遠程搜索，需要將filterable和remote設(shè)置為true，同時傳入一個remote-method。remote-method為一個Function，它會在輸入值發(fā)生變化時調(diào)用，參數(shù)為當前輸入值。需要注意的是，如果el-option是通過v-for指令渲染出來的，此時需要為el-option添加key屬性，且其值需具有唯一性，比如此例中的item.value。

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="請輸入關(guān)鍵詞"
    :remote-method="remoteMethod"
    :loading="loading"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [],
        value: [],
        list: [],
        loading: false,
        states: [
          'Alabama',
          'Alaska',
          'Arizona',
          'Arkansas',
          'California',
          'Colorado',
          'Connecticut',
          'Delaware',
          'Florida',
          'Georgia',
          'Hawaii',
          'Idaho',
          'Illinois',
          'Indiana',
          'Iowa',
          'Kansas',
          'Kentucky',
          'Louisiana',
          'Maine',
          'Maryland',
          'Massachusetts',
          'Michigan',
          'Minnesota',
          'Mississippi',
          'Missouri',
          'Montana',
          'Nebraska',
          'Nevada',
          'New Hampshire',
          'New Jersey',
          'New Mexico',
          'New York',
          'North Carolina',
          'North Dakota',
          'Ohio',
          'Oklahoma',
          'Oregon',
          'Pennsylvania',
          'Rhode Island',
          'South Carolina',
          'South Dakota',
          'Tennessee',
          'Texas',
          'Utah',
          'Vermont',
          'Virginia',
          'Washington',
          'West Virginia',
          'Wisconsin',
          'Wyoming',
        ],
      }
    },
    mounted() {
      this.list = this.states.map((item) => {
        return { value: `value:${item}`, label: `label:${item}` }
      })
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            this.loading = false
            this.options = this.list.filter((item) => {
              return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
            })
          }, 200)
        } else {
          this.options = []
        }
      },
    },
  }
</script>

創(chuàng)建條目

可以創(chuàng)建并選中選項中不存在的條目

使用allow-create屬性即可通過在輸入框中輸入文字來創(chuàng)建新的條目。注意此時filterable必須為真。本例還使用了default-first-option屬性，在該屬性打開的情況下，按下回車就可以選中當前選項列表中的第一個選項，無需使用鼠標或鍵盤方向鍵進行定位。

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="請選擇文章標簽"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            value: 'HTML',
            label: 'HTML',
          },
          {
            value: 'CSS',
            label: 'CSS',
          },
          {
            value: 'JavaScript',
            label: 'JavaScript',
          },
        ],
        value: [],
      }
    },
  }
</script>

如果 Select 的綁定值為對象類型，請務必指定 value-key 作為它的唯一性標識。

Select Attributes

參數(shù)說明類型可選值默認值
model-value / v-model綁定值string / number / boolean / object——
multiple是否多選boolean—false
disabled是否禁用boolean—false
value-key作為 value 唯一標識的鍵名，綁定值為對象類型時必填string—value
size輸入框尺寸stringmedium/small/mini—
clearable是否可以清空選項boolean—false
collapse-tags多選時是否將選中值按文字的形式展示boolean—false
multiple-limit多選時用戶最多可以選擇的項目數(shù)，為 0 則不限制number—0
nameselect input 的 name 屬性string——
autocompleteselect input 的 autocomplete 屬性string—off
placeholder占位符string—請選擇
filterable是否可搜索boolean—false
allow-create是否允許用戶創(chuàng)建新條目，需配合 filterable 使用boolean—false
filter-method自定義搜索方法function——
remote是否為遠程搜索boolean—false
remote-method遠程搜索方法function——
loading是否正在從遠程獲取數(shù)據(jù)boolean—false
loading-text遠程加載時顯示的文字string—加載中
no-match-text搜索條件無匹配時顯示的文字，也可以使用#empty設(shè)置string—無匹配數(shù)據(jù)
no-data-text選項為空時顯示的文字，也可以使用#empty設(shè)置string—無數(shù)據(jù)
popper-classSelect 下拉框的類名string——
reserve-keyword多選且可搜索時，是否在選中一個選項后保留當前的搜索關(guān)鍵詞boolean—false
default-first-option在輸入框按下回車，選擇第一個匹配項。需配合 filterable 或 remote 使用boolean-false
popper-append-to-body是否將彈出框插入至 body 元素。在彈出框的定位出現(xiàn)問題時，可將該屬性設(shè)置為 falseboolean-true
automatic-dropdown對于不可搜索的 Select，是否在輸入框獲得焦點后自動彈出選項菜單boolean-false
clear-icon自定義清空圖標的類名string—el-icon-circle-close

Select Events

事件名稱說明回調(diào)參數(shù)
change選中值發(fā)生變化時觸發(fā)目前的選中值
visible-change下拉框出現(xiàn)/隱藏時觸發(fā)出現(xiàn)則為 true，隱藏則為 false
remove-tag多選模式下移除 tag 時觸發(fā)移除的 tag 值
clear可清空的單選模式下用戶點擊清空按鈕時觸發(fā)—
blur當 input 失去焦點時觸發(fā)(event: Event)
focus當 input 獲得焦點時觸發(fā)(event: Event)

Select Slots

name說明
—Option 組件列表
prefixSelect 組件頭部內(nèi)容
empty無選項時的列表

Option Group Attributes

參數(shù)說明類型可選值默認值
value選項的值string / number / boolean / object——
label選項的標簽，若不設(shè)置則默認與 value 相同string/number——
disabled是否禁用該選項boolean—false

Methods

方法名說明參數(shù)
focus使 input 獲取焦點-
blur使 input 失去焦點，并隱藏下拉框-


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號