1. Select選擇器

1.1. 當(dāng)選項(xiàng)過多時(shí), 使用下拉菜單展示并選擇內(nèi)容。

1.2. Select屬性

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

1.3. Select事件

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

1.4. Select Slots

name	說明
—	Option組件列表
prefix	Select組件頭部內(nèi)容
empty	無選項(xiàng)時(shí)的列表

1.5. Option Group屬性

參數(shù)	說明	類型	默認(rèn)值
label	分組的組名	string	無
disabled	是否將該分組下所有選項(xiàng)置為禁用	boolean	false

1.6. Option屬性

參數(shù)	說明	類型	默認(rèn)值
value	選項(xiàng)的值	string/number/object	無
label	選項(xiàng)的標(biāo)簽, 若不設(shè)置則默認(rèn)與value相同	string/number	無
disabled	是否禁用該選項(xiàng)	boolean	false

1.7. 方法

事件名稱	說明
focus	在Input獲得焦點(diǎn)
blur	使input失去焦點(diǎn), 并隱藏下拉框

2. Select選擇器例子

2.1. 使用腳手架新建一個名為element-ui-select的前端項(xiàng)目, 同時(shí)安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Select from '../components/Select.vue' import MultipleSelect from '../components/MultipleSelect.vue' import SearchSelect from '../components/SearchSelect.vue' import RemoteSearchSelect from '../components/RemoteSearchSelect.vue' import CreateSelect from '../components/CreateSelect.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Select' },{ path: '/Select', component: Select },{ path: '/MultipleSelect', component: MultipleSelect },{ path: '/SearchSelect', component: SearchSelect },{ path: '/RemoteSearchSelect', component: RemoteSearchSelect },{ path: '/CreateSelect', component: CreateSelect } ]const router = new VueRouter({routes })export default router

2.3. 在components下創(chuàng)建Select.vue

<template><div><h1>基礎(chǔ)用法-適用廣泛的基礎(chǔ)單選</h1><h4>v-model的值為當(dāng)前被選中的el-option的value屬性值。</h4><el-select v-model="base_value" placeholder="請選擇"><el-option v-for="item in base_options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select><h1>有禁用選項(xiàng)</h1><h4>在el-option中, 設(shè)定disabled值為true, 即可禁用該選項(xiàng)。</h4><el-select v-model="disabled_value" placeholder="請選擇"><el-option v-for="item in disabled_options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option></el-select><h1>禁用狀態(tài)-選擇器不可用狀態(tài)</h1><h4>為el-select設(shè)置disabled屬性, 則整個選擇器不可用。</h4><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><h1>可清空單選</h1><h4>為el-select設(shè)置clearable屬性, 則可將選擇器清空。需要注意的是, clearable屬性僅適用于單選。</h4><el-select v-model="clearable_value" clearable placeholder="請選擇"><el-option v-for="item in clearable_options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></div> </template><script> export default {data () {return {base_options: [{value: '選項(xiàng)1',label: '黃金糕'}, {value: '選項(xiàng)2',label: '雙皮奶'}, {value: '選項(xiàng)3',label: '蚵仔煎'}, {value: '選項(xiàng)4',label: '龍須面'}, {value: '選項(xiàng)5',label: '北京烤鴨'}],base_value: '',disabled_options: [{value: '選項(xiàng)1',label: '黃金糕'}, {value: '選項(xiàng)2',label: '雙皮奶',disabled: true}, {value: '選項(xiàng)3',label: '蚵仔煎'}, {value: '選項(xiàng)4',label: '龍須面'}, {value: '選項(xiàng)5',label: '北京烤鴨'}],disabled_value: '',options: [{value: '選項(xiàng)1',label: '黃金糕'}, {value: '選項(xiàng)2',label: '雙皮奶'}, {value: '選項(xiàng)3',label: '蚵仔煎'}, {value: '選項(xiàng)4',label: '龍須面'}, {value: '選項(xiàng)5',label: '北京烤鴨'}],value: '',clearable_options: [{value: '選項(xiàng)1',label: '黃金糕'}, {value: '選項(xiàng)2',label: '雙皮奶'}, {value: '選項(xiàng)3',label: '蚵仔煎'}, {value: '選項(xiàng)4',label: '龍須面'}, {value: '選項(xiàng)5',label: '北京烤鴨'}],clearable_value: ''}} } </script>

2.4. 在components下創(chuàng)建MultipleSelect.vue

<template><div><h1>基礎(chǔ)多選-適用性較廣的基礎(chǔ)多選, 用Tag展示已選項(xiàng)</h1><h4>為el-select設(shè)置multiple屬性即可啟用多選, 此時(shí)v-model的值為當(dāng)前選中值所組成的數(shù)組。默認(rèn)情況下選中值會以Tag的形式展現(xiàn), 你也可以設(shè)置collapse-tags屬性將它們合并為一段文字。</h4><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><h1>自定義模板-可以自定義備選項(xiàng)</h1><h4>將自定義的HTML模板插入el-option的slot中即可。</h4><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: #8492a6; font-size: 13px">{{ item.value }}</span></el-option></el-select><h1>分組-備選項(xiàng)進(jìn)行分組展示</h1><h4>使用el-option-group對備選項(xiàng)進(jìn)行分組, 它的label屬性為分組名。</h4><el-select v-model="group_value" placeholder="請選擇"><el-option-group v-for="group in group_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></div> </template><script> export default {data () {return {options: [{value: '選項(xiàng)1',label: '黃金糕'}, {value: '選項(xiàng)2',label: '雙皮奶'}, {value: '選項(xiàng)3',label: '蚵仔煎'}, {value: '選項(xiàng)4',label: '龍須面'}, {value: '選項(xiàng)5',label: '北京烤鴨'}],value1: [],value2: [],cities: [{value: 'Beijing',label: '北京'}, {value: 'Shanghai',label: '上海'}, {value: 'Nanjing',label: '南京'}, {value: 'Chengdu',label: '成都'}, {value: 'Shenzhen',label: '深圳'}, {value: 'Guangzhou',label: '廣州'}],value: '',group_options: [{label: '熱門城市',options: [{value: 'Shanghai',label: '上海'}, {value: 'Beijing',label: '北京'}]}, {label: '城市名',options: [{value: 'Chengdu',label: '成都'}, {value: 'Shenzhen',label: '深圳'}, {value: 'Guangzhou',label: '廣州'}, {value: 'Dalian',label: '大連'}]}],group_value: ''}} } </script>

2.5. 在components下創(chuàng)建SearchSelect.vue

<template><div><h1>可搜索-可以利用搜索功能快速查找選項(xiàng)</h1><h4>為el-select添加filterable屬性即可啟用搜索功能。默認(rèn)情況下, Select會找出所有l(wèi)abel屬性包含輸入值的選項(xiàng)。如果希望使用其他的搜索邏輯, 可以通過傳入一個filter-method來實(shí)現(xiàn)。filter-method為一個Function, 它會在輸入值發(fā)生變化時(shí)調(diào)用, 參數(shù)為當(dāng)前輸入值。</h4><el-select v-model="value" filterable placeholder="請選擇" :filter-method="filterMethod"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></div> </template><script> export default {data () {return {options: [{value: '選項(xiàng)1',label: '黃金糕'}, {value: '選項(xiàng)2',label: '雙皮奶'}, {value: '選項(xiàng)3',label: '蚵仔煎'}, {value: '選項(xiàng)4',label: '龍須面'}, {value: '選項(xiàng)5',label: '北京烤鴨'}],value: ''}},methods: {filterMethod (query) {console.log(query)}} } </script>

2.6. 在components下創(chuàng)建RemoteSearchSelect.vue

<template><div><h1>遠(yuǎn)程搜索-從服務(wù)器搜索數(shù)據(jù), 輸入關(guān)鍵字進(jìn)行查找</h1><h4>為了啟用遠(yuǎn)程搜索, 需要將filterable和remote設(shè)置為true, 同時(shí)傳入一個remote-method。remote-method為一個Function, 它會在輸入值發(fā)生變化時(shí)調(diào)用, 參數(shù)為當(dāng)前輸入值。需要注意的是, 如果el-option是通過v-for指令渲染出來的, 此時(shí)需要為el-option添加key屬性, 且其值需具有唯一性, 比如此例中的item.value。</h4><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></div> </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 = truesetTimeout(() => {this.loading = falsethis.options = this.list.filter(item => {return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1})}, 200)} else {this.options = []}}} } </script>

2.7. 在components下創(chuàng)建CreateSelect.vue

<template><div><h1>創(chuàng)建條目-可以創(chuàng)建并選中選項(xiàng)中不存在的條目</h1><h4>使用allow-create屬性即可通過在輸入框中輸入文字來創(chuàng)建新的條目。注意此時(shí)filterable必須為真。本例還使用了default-first-option屬性, 在該屬性打開的情況下, 按下回車就可以選中當(dāng)前選項(xiàng)列表中的第一個選項(xiàng), 無需使用鼠標(biāo)或鍵盤方向鍵進(jìn)行定位。</h4><el-select v-model="value" multiple filterable allow-create default-first-option placeholder="請選擇文章標(biāo)簽"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></div> </template><script> export default {data () {return {options: [{value: 'HTML',label: 'HTML'}, {value: 'CSS',label: 'CSS'}, {value: 'JavaScript',label: 'JavaScript'}],value: []}} } </script>

2.8. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/Select

2.9. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/MultipleSelect?

2.10. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/SearchSelect?

2.11. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/RemoteSearchSelect

2.12. 運(yùn)行項(xiàng)目, 訪問http://localhost:8080/#/CreateSelect?

?

總結(jié)

以上是生活随笔為你收集整理的010_Select选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。